title: Confused about ui-router nesting
body: <p>I'm trying to find a way for one of my views to have multiple states. Let's say I have this template:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div ui-view="overlay"&gt;
    &lt;div ui-view="content"&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>...and these routes:</p>
  
  <pre><code>$stateProvider
    .state('base', {
      url: '',
      abstract: true,
       views: {
        'overlay': {
          templateUrl: '/src/overlay.html'
        }
      }
    })
    .state('base.page1', {
      url: '/page1/',
      views: {
        'content@': {
          templateUrl: '/src/page1.html'
        }
      }
    })
    .state('base.page2', {
      url: '/page2/',
      views: {
        'content@': {
          templateUrl: '/src/page2.html',
        }
      }
    });
  </code></pre>
  
  <p>This allows me to show the "overlay" view on page1 and page2. </p>
  
  <p>The "overlay" view needs to be able to change its state without affecting anything else on the page. I can set up "overlay" as a parent state and add children to it, but I can't figure out a way to activate any of those <code>overlay.child</code> states from inside a <code>base</code> state without losing whatever was in the <code>base</code> state. Can anyone point me in the right direction?</p>
  
  <p>edit: plunker here <a href="http://plnkr.co/edit/vPmNhVLZNI2fOAZZOHkg" rel="nofollow">http://plnkr.co/edit/vPmNhVLZNI2fOAZZOHkg</a> </p>