title: Angular routing ui-view inside another ui-view
body: <p>Conception overview:</p>
  
  <p>We have two tabs on index html. There we routing those tabs like that:</p>
  
  <pre><code>&lt;div ui-view&gt;&lt;/div&gt;
  </code></pre>
  
  <p>On a second tab we have a selector, that switch tab's content in another ui-view like that:</p>
  
  <pre><code>&lt;div ui-view="{{vm.currentView}}"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>where vm.currentView is a name of routing state ('book1' and etc.).</p>
  
  <pre><code> .state('tab2', {
          abstract: true,
          templateUrl: 'tab2.html',
          controller: 'Tab2Controller',
          controllerAs: 'vm'
      })
      .state('tab2.content', {
          url: '/tab2',
          views: {
              '': {
                  templateUrl: 'tab2.html'
              },
              'book1@tab2': {
                  templateUrl: 'tab2-book1.html'
              },
              'book2@tab2': {
                  templateUrl: 'tab2-book2.html'
              },
              'book3@tab2': {
                  templateUrl: 'tab2-book3.html'
              },
              'book4@tab2': {
                  templateUrl: 'tab2-book4.html'
              }
          }
      });
  </code></pre>
  
  <p>Everything is fine, except one thing: data content and name of a view is changing, but a template content isn't.</p>
  
  <p>I resolved it by another way (based on exclude 'ui-view inside another ui-view' conception and separate views in states). But i still want to know: "How to do this with using 'ui-view inside ui-view' conception?"</p>
  
  <p><a href="http://plnkr.co/edit/RLzAh3D8aunOpKfFVcVa?p=preview" rel="noreferrer">Here's a Plunker Example</a></p>