javascript - タブの AngularJS コントローラー

Question

ページに 3 つのタブがあります。私はAngular Bootstrap Docsに従って使用tabsetしています。tab

as<div>を持つコントローラーを設定しましたtabset

<div ng-controller="Tabs" class="panel panel-default" id="tabs-panel"> 
  <tabset  class="panel-body">
    <tab heading="Tab 1"> </tab>
    <tab heading="Tab 2"> </tab>
    <tab heading="Tab 3"> </tab>
  </tabset>
</div>

対応ページは

しかし、2番目のタブに別のコントローラーを追加しようとすると

<div ng-controller="Tabs" class="panel panel-default" id="tabs-panel"> 
  <tabset  class="panel-body">
    <tab heading="Tab 1"> </tab>
    <tab heading="Tab 2" ng-controller="Tab2> </tab>
    <tab heading="Tab 3"> </tab>
  </tabset>
</div>

見出しが表示されなくなり、Tab2 をクリックできなくなりました。

何故ですか？同じ機能を取り戻す方法は？

これは、既存のコントローラーに別のコントローラーを追加する正しい方法ですか?

私のapp.js :

var myApp = angular.module('myApp',['ui.bootstrap']);

myApp.controller('Tabs', function ($scope) {

});


myApp.controller('Tab2', function ($scope) {

});