Angular UI-Router modal removes parent state

Question

I\'m working on an angular app that has ui-router module. When entering a certain state of the router, I show a modal dialog, which then replaces my parent view. I would lik

Answer 1

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.