title: Building Angular-ui Bootstrap tabs with ad hoc uib-tabset, uib-tab tag elements
body: <p>I'm writing my nice tabs panel with angular-ui bootstrap directives. Therefore I've included in my project, under a folder called "templates" the two html templates: tab.html and tabset.html. Their code, as it can be found also on GitHub is:</p>
  
  <p><strong>tab.html</strong></p>
  
  <pre><code>&lt;li ng-class="{active: active, disabled: disabled}" class="uib-tab nav-item"&gt;
      &lt;a href ng-click="select()" class="nav-link" uib-tab-heading-transclude&gt;{{heading}}&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p><strong>tabset.html</strong></p>
  
  <pre><code>&lt;div&gt;
      &lt;ul class="nav nav-{{tabset.type || 'tabs'}}" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude&gt;&lt;/ul&gt;
      &lt;div class="tab-content"&gt;
           &lt;div class="tab-pane"
           ng-repeat="tab in tabset.tabs"
           ng-class="{active: tabset.active === tab.index}"
           uib-tab-content-transclude="tab"&gt;
           &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In my html file, in order to build the tabs panes, I have the following code:</p>
  
  <pre><code>&lt;uib-tabset&gt;
      &lt;uib-tab heading="Profile"&gt;
          &lt;ng-include src="'components/dashboard/profile_tab.html'"&gt;&lt;/ng-include&gt;
      &lt;/uib-tab&gt;
      &lt;uib-tab heading="Projects"&gt;
          &lt;ng-include src="'components/dashboard/projects_tab.html'"&gt;&lt;/ng-include&gt;
       &lt;/uib-tab&gt;
       &lt;uib-tab heading="Quotes"&gt;
          &lt;ng-include src="'components/dashboard/quotes_tab.html'"&gt;&lt;/ng-include&gt;
       &lt;/uib-tab&gt;
       &lt;uib-tab heading="Reviews"&gt;
          &lt;ng-include src="'components/dashboard/reviews_tab.html'"&gt;&lt;/ng-include&gt;
       &lt;/uib-tab&gt;
  &lt;/uib-tabset&gt;
  </code></pre>
  
  <p>Now, the thing is that the tab.html template is correctly used, and I see all my tabs heading, as specified in my html file. However, I don't see any of the tabs content.</p>
  
  <p>By playing with the content of tabset.html, I've managed to load the 4 tabs content, substituting the <code>ng-repeat="tab in tabset.tabs"</code> with <code>ng-repeat="tab in tabs"</code> (don't ask me why it works cause I don't know...) but the tabs content display all together, since they all happen to have the active class applied... any clue what I'm doing wrong??
  Thanks!</p>