javascript - Creating a popup like state using AngularJS ui-router -

i'm trying create state acts popup, i.e doesn't clear current state, pops on without destroying current state (so user can gain access dismissing popup).

heavily simplified, applications routes following:

angular.module('test', ['ui.router'])    .config(['$stateprovider', '$urlrouterprovider',      function($stateprovider, $urlrouterprovider) {        $stateprovider          .state('login', {            url: '/login',            template: '<button><a ui-sref="authenticated.home">login</a></button>'          })          .state('authenticated', {            url: '/authenticated',            template: '<p>we authenticated</p>' +              '<a ui-sref="authenticated.home">home</a>' +              '<a ui-sref="authenticated.statistics">statistics</a>' +              '<a ui-sref="authenticated.popup">popup!</a>' +              '<div ui-view></div>' +              '<div ui-view="popup"></div>'          })          .state('authenticated.home', {            url: '^/home',            template: '<p>we in home. <br><input></p>'          })          .state('authenticated.statistics', {            url: '^/statistics',            template: '<p>we in statistics. <br><input></p>'          })          .state('authenticated.popup', {            url: '^/popup',            views: {              popup: {                template: '<div id="popup"><p>popup up</p>' +                  '<a ui-sref="authenticated.home">close</a>' +                  '</div>'              }            }          });        $urlrouterprovider.otherwise('/login');      }    ]);

a {    margin-right: 20px;    text-decoration: none;  }  #popup {    position: absolute;    top: 0;    bottom: 0;    width: 100%;    background: #000;    color: #fff;  }

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>  <div ng-app="test">    <div ui-view>    </div>  </div>

• user presented login screen
• once logged in, user redirected authenticated.home state. authenticated parent state holds navigation menu , <ui-view> attach subviews
• user can use navigation navigate around application other routes authenticated.statistics, authenticated.popup.

the problem that, when move popup state, though have specified popup view inside it's views object, clears other ui-view (makes sense though, because we're no longer in state matches it).

one solution can think of use ui-router-extras go previous state, problem changes user might have been making in previous states lost.

another solution have template of popup in authenticated states template , show/hide it. problem that, popup should bookmark-able state, loads data server based on state params.

is there better approach create state acts popup on current state? maybe changing template structure or using abstract-states haven't thought of?

the sticky states add on ui-router-extras should you're looking for. gives ability create sticky/parallel states should allow create popup state without affecting original state in.

i haven't experimented enough know details main idea move main states under root app state , set sticky true:

$stateprovider.state('app', {       url: '',       views: {         'app': {           templateurl: 'app.html',           controller: 'mainctrl',         }       },       sticky: true   });    $stateprovider.state('app.account', {       url: '/account',       templateurl: 'account.html'   });    $stateprovider.state('app.account.stuff', {       url: '/stuff',       template: "<h3>here's stuff:</h3><ul><li>stuff 1</li><li>stuff 2</li><li>stuff 3</li></ul>"   }); 

after add modal state sibling (so not child of root app state)

$stateprovider.state('modal', {       url: '/modal',       views: {         'modal': {           templateurl: 'modal.html'         }       }   }); 

i took example provided in docs , made few edits add controllers , simplify it: http://plnkr.co/edit/4jgdicduqs0za4fbalj1?p=preview