title: In Angularjs with ui-router how to change hash without reloading controller but keeping subviews routing enabled
body: <p><strong>In short</strong>: my <a href="http://s.codepen.io/M1k3l/debug/EKEQLw" rel="nofollow noreferrer">demo</a>, how to have subviews? (without reloading page)</p>
  
  <p><strong>Longer</strong>:</p>
  
  <p>I'm using <a href="https://github.com/joelmukuthu/angular-snapscroll" rel="nofollow noreferrer">snapscroll</a> to provide different screens effect (<a href="http://joelmukuthu.github.io/angular-snapscroll/" rel="nofollow noreferrer">demo</a>). This directive doesn't support by default ui-router so I had to do it myself.</p>
  
  <p>When you move the mouse wheel <code>beforeSnap</code> event event is triggered. I call ui-router  <code>$state.go</code> to change URL hash. I don't reload the controller.</p>
  
  <pre><code>$scope.beforeSnap = function (snapIndex) {
      $state.go('view' + snapIndex,{},{
          notify:false,
          reload:false, 
          location:'replace', 
          inherit:true
      });
  };
  </code></pre>
  
  <p>Routing is like</p>
  
  <pre><code>.state('main', {
      url: '/',
      templateUrl: 'views/screens.html',
      controller: 'mainCtrl'
  })
  .state('view0', {
      url: '/green',
      templateUrl: 'views/screens.html',
      controller: 'mainCtrl',
      params: {'color': 'green', 'screenIndex': 0}
  })
  [...]
  </code></pre>
  
  <p>views/screens.html:</p>
  
  <pre><code>&lt;div fit-window-height="" snapscroll="" snap-index="snapIndex" before-snap="beforeSnap(snapIndex)"&gt;
      &lt;div class="green"&gt;&lt;/div&gt;
      &lt;div class="blue"&gt;
          &lt;!-- How to enable these subviews? --&gt;
          &lt;!-- &lt;a ui-sref="view0.a"&gt;Go to view0.a&lt;/a&gt; --&gt;
          &lt;!-- &lt;a ui-sref="view0.b"&gt;Go to view0.b&lt;/a&gt; --&gt;
          &lt;div ui-view="view1"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="red"&gt;&lt;/div&gt;
      &lt;div class="yellow"&gt;
          &lt;div ui-view="view3"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>You can see a <a href="http://codepen.io/M1k3l/pen/EKEQLw" rel="nofollow noreferrer">codepen</a> and a <a href="http://s.codepen.io/M1k3l/debug/EKEQLw" rel="nofollow noreferrer">demo</a>.</p>
  
  <p>The issue is that I want to have subviews in some "screens" (colours divs), e.g: view1 and view3.
  But I don't know how to do it without reloading the whole page. Subviews like:</p>
  
  <ul>
  <li>/view1/a</li>
  <li>/view1/b</li>
  <li>/view3/a</li>
  <li>/view3/b</li>
  <li>/view3/c</li>
  </ul>
  
  <p>Besides, I think screens would be better/cleaner being children of main main.view0, main.view1, etc.</p>
  
  <p>I read about <a href="https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views" rel="nofollow noreferrer">multiple named views in ui-router</a> and <a href="https://stackoverflow.com/questions/28800644/nested-states-or-views-for-layout-with-leftbar-in-ui-router?rq=1">nested states</a> without success.</p>