title: angular ui router and sticky states
body: <p>I am a newbie at angular ui-router, but have been using it for simple layouts up until now.</p>
  
  <p>I have this plunker : <a href="http://plnkr.co/edit/q71yKZ2m8iZrZo2FwbZd?p=preview" rel="nofollow">http://plnkr.co/edit/q71yKZ2m8iZrZo2FwbZd?p=preview</a></p>
  
  <p>What I am trying to do is twofold : </p>
  
  <ol>
  <li>to be able to make some changes in part a, click on part b , make some changes and click back between the 2 parts, but retain the modified data</li>
  <li>to make changes in a, go to b, then press the back button and get back to a without loosing the changes</li>
  </ol>
  
  <p>my states are defined like this</p>
  
  <pre><code>$stateProvider
          .state('top', {
              url: '/top',
              name: 'top',
              sticky: true,
              templateUrl: 'top.html'
          });
  
  $stateProvider
          .state('top.parta', {
              url: '/parta',
              name: 'parta',
              sticky: true,
              templateUrl: 'parta.html',
              controller: 'parta'
          });
  
  $stateProvider
          .state('top.partb', {
              url: '/partb',
              name: 'partb',
              templateUrl: 'partb.html',
              sticky: true,
              controller: 'partb'
          });    
  </code></pre>
  
  <p>whilst I can get the views working, I can't seem to be able to keep the state in place</p>
  
  <p>I thought that by having "top.parta" and "top.partb" I would be creating a nested view, but am somewhat confused about the need to have the <em>views</em> object within the top level state</p>
  
  <p>When I tried using views, all I got was a blank screen. I hope that this is a simple enough fix - all I need is that switch to turn the bulb on ;)</p>
  
  <p><strong>update #1</strong>
  looks like I <em>need</em> to use named views ("The sticky state view must target its own unique named ui-view."). I'll look further into this</p>