title: angular-ui-router and angular-ui-bootstrap tabs: content being loaded into DOM multiple times
body: <p>I'm using angular-ui-bootstrap <a href="http://angular-ui.github.io/bootstrap/#/tabs" rel="nofollow">tabs</a> and angular-ui-router. I want to load specific states into the tab-pane when a tab is clicked. This is working fine. The problem is that the state is being loaded into every tab pane in the DOM. Although the user can never tell, it is not a good idea to have all this content to be unnecessarily repeated in the DOM. The reason why this is happening is clear--the state templates are being inserted into ui-view, as can be seen below:</p>
  
  <pre><code>&lt;tabset&gt;
    &lt;tab class="clinical-tabs" ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled" ui-sref="activity.clinical.{{tab.title}}"&gt;
      &lt;div ui-view&gt;&lt;/div&gt;
    &lt;/tab&gt;
  &lt;/tabset&gt;
  </code></pre>
  
  <p>And the result is that the content is being loaded in every tab-pane:</p>
  
  <pre><code>&lt;div class="tab-content"&gt;
    &lt;!-- ngRepeat: tab in tabs --&gt;
    &lt;div class="tab-pane ng-scope active" ng-repeat="tab in tabs" ng-class="{active: tab.active}" tab-content-transclude="tab"&gt;
      &lt;!-- uiView:  --&gt;
      &lt;div ui-view="" class="ng-scope"&gt;
        CONTENT IS LOADED HERE
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- end ngRepeat: tab in tabs --&gt;
  
    &lt;div class="tab-pane ng-scope" ng-repeat="tab in tabs" ng-class="{active: tab.active}" tab-content-transclude="tab"&gt;
      &lt;!-- uiView:  --&gt;
      &lt;div ui-view="" class="ng-scope"&gt;
        CONTENT IS ALSO LOADED HERE
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- end ngRepeat: tab in tabs --&gt;
    ...
    ...
    ...
  &lt;/div&gt;
  </code></pre>
  
  <p>Like I said, the cause of the problem is clear. However, I don't have enough experience with Angular to know how to come up with a solution.</p>