I think the proper solution would be something like:
$stateProvider.state("clients.list", {
url: "/list",
templateUrl: "app/client/templates/client-list.tpl.html",
controller: moduleNamespace.clientListController,
resolve: {
clients: function (ClientService) {
return ClientService.all();
}
}
})
.state("clients.list.add", {
url: "^/add",
})
Important things are I made /add
absolute by adding a ^
. Most people would have just done /list/add
because the default behavior of nested state is to add them together...the ^
bypasses this. You also would need to on state load style this thing so its a "modal" and is on top of other content.
And then inside of clients.list
state you would need to update /client-list.tpl.html
to have an ng-view
that would style itself on top of the parent view.
I can create a plunkr if need be, but if I do that I am basically implementing everything for you.