AngularJS - ng-include模板的行为有所不同

Question

我正在努力理解为什么ng-include模板似乎打破了我的角度应用。

我有一些ui bootstrap选项卡问题与多个控制器，并采用这种设计工作（注意我不能使用内置选项卡切换跨多个控制器，所以它是隐藏的）： https://plnkr.co/edit/hCCVFt58OXztZDQtxGIS?p=preview

但是，只需将导航部分移动到模板就会破坏切换选项： https://plnkr.co/edit/Lbh2Pw2wiZAS6oZTwX47?p=preview

变量＆＃39; active_tab＆＃39;似乎正确地更新了...但我猜测范围在模板中时会发生变化吗？

  <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" ng-click="navCollapsed = !navCollapsed">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Title</a>
        </div> <!-- end navbar-header -->
    <div class="collapse navbar-collapse" uib-collapse="navCollapsed">
      <ul class="nav navbar-nav">
        <li ng-class="{active: active_tab == 1}" ng-click="active_tab = 1"><a href="#">Tab 1</a></li>
        <li ng-class="{active: active_tab == 2}" ng-click="active_tab = 2"><a href="#">Tab 2</a></li> 
        <li ng-class="{active: active_tab == 3}" ng-click="active_tab = 3"><a href="#">Tab 3</a></li> 
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Selected Tab: {{ active_tab }}</a></li>
      </ul>
    </div> <!-- end uib-collapse -->
  </nav> <!-- end nav -->
<uib-tabset active="active_tab">
  <ng-controller ng-controller="test_controller1">
    <uib-tab index="1" heading="tab 1">1: {{ tab1_content }}</uib-tab>
    <uib-tab index="2" heading="tab 2">2: {{ tab2_content }}</uib-tab>
  </ng-controller>
  <ng-controller ng-controller="test_controller2">
    <uib-tab index="3" heading="tab 3">3: {{ tab3_content }}</uib-tab>
  </ng-controller>
</uib-tabset>