title: AngularJS controller for a tab
body: <p>I have three tabs in my page. I'm using <code>tabset</code> and <code>tab</code> according to <a href="https://angular-ui.github.io/bootstrap/#/tabs" rel="nofollow noreferrer">Angular Bootstrap Docs</a>.</p>
  
  <p>I set a controller for the <code>&lt;div&gt;</code> which has the <code>tabset</code>as </p>
  
  <pre><code>&lt;div ng-controller="Tabs" class="panel panel-default" id="tabs-panel"&gt; 
    &lt;tabset  class="panel-body"&gt;
      &lt;tab heading="Tab 1"&gt; &lt;/tab&gt;
      &lt;tab heading="Tab 2"&gt; &lt;/tab&gt;
      &lt;tab heading="Tab 3"&gt; &lt;/tab&gt;
    &lt;/tabset&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The corresponding page is <a href="https://i.stack.imgur.com/UYNbG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UYNbG.png" alt="enter image description here"></a></p>
  
  <p>But, when I try to add another controller for my 2nd tab as </p>
  
  <pre><code>&lt;div ng-controller="Tabs" class="panel panel-default" id="tabs-panel"&gt; 
    &lt;tabset  class="panel-body"&gt;
      &lt;tab heading="Tab 1"&gt; &lt;/tab&gt;
      &lt;tab heading="Tab 2" ng-controller="Tab2&gt; &lt;/tab&gt;
      &lt;tab heading="Tab 3"&gt; &lt;/tab&gt;
    &lt;/tabset&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/qQLtI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qQLtI.png" alt="enter image description here"></a></p>
  
  <p>I now find that the heading is not displayed and I can no longer click the Tab2.</p>
  
  <p>Why is that? How to get back the same functionality?</p>
  
  <p>Is this the right way to add another controller in an existing controller?</p>
  
  <p>My <strong>app.js</strong> : </p>
  
  <pre><code>var myApp = angular.module('myApp',['ui.bootstrap']);
  
  myApp.controller('Tabs', function ($scope) {
  
  });
  
  
  myApp.controller('Tab2', function ($scope) {
  
  });
  </code></pre>