javascript - How use ng-view inside ng-view? -

i have main ng-view, , controller left\right side. right side fixed, left side want change other templates , controllers.

http://plnkr.co/edit/mtxmmzwry7o0nh88qk3f

 <div ng-controller="mainctrl main">   choose:   <a href="book/moby">moby</a> |   <a href="book/moby/ch/1">moby: ch1</a> |   <a href="book/gatsby">gatsby</a> |   <a href="book/gatsby/ch/4?key=value">gatsby: ch4</a> |   <a href="book/scarlet">scarlet letter</a><br/>    <div class="left-side view-animate-container">     <div ng-view class="view-animate"></div>   </div>  <div class="some-fixed-right-side">    <pre>$location.path() = {{main.$location.path()}}</pre>   <pre>$route.current.templateurl = {{main.$route.current.templateurl}}</pre>   <pre>$route.current.params = {{main.$route.current.params}}</pre>   <pre>$routeparams = {{main.$routeparams}}</pre>   </div> </div> 

i used solution derived here: http://www.bennadel.com/blog/2420-mapping-angularjs-routes-onto-url-parameters-and-client-side-events.htm

allowing me nest views (and skipping limited ng-view altogether)

after doing so, other (simpler, better, believe) solution appeared:

http://angular-ui.github.com/ (scroll down "route checking")