title: ui-bootstrap tab shows incorrect tab content when using ng-show
body: <p>I have tabs, for which some are dynamically shown with <code>ng-show</code>. The problem is that if the first tab is not shown, then the second tab should be the active tab. But it is not working this way. It seems the first tab is still active, causing the tab 1 content to be in the tab 2.</p>
  
  <p><a href="https://i.stack.imgur.com/Psj4K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Psj4K.png" alt="enter image description here"></a></p>
  
  <p>What I need is the following, when the tabs are first loaded</p>
  
  <p><a href="https://i.stack.imgur.com/1RHvx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1RHvx.png" alt="enter image description here"></a></p>
  
  <p>In the code below if I set the <code>active="1"</code> for the <code>ui-tabset</code>, then it works as expected</p>
  
  <pre><code>&lt;uib-tabset active="1"&gt;
  </code></pre>
  
  <p>But I can't do this, as this needs to be dynamic. The first tab may or may not be shown. I tried to use a binding value (as shown in the code below) for the <code>active</code> attribute, but that doesn't work. It still has the same result as the first image above.</p>
  
  <p>I have the following MCVE (also <a href="http://plnkr.co/edit/tj6e4ydkAPGluJUQidxr?p=preview" rel="nofollow noreferrer">Plunker</a>)</p>
  
  <p>html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body ng-app="exampleApp"&gt;
      &lt;div ng-controller="TabsDemoCtrl"&gt;
        &lt;uib-tabset active="initialActive"&gt;
          &lt;uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" ng-show="tab.show" 
                   active="tab.active" index="$index"&gt;
            {{tab.content}}
          &lt;/uib-tab&gt;
        &lt;/uib-tabset&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>script </p>
  
  <pre><code>angular.module('exampleApp', ['ui.bootstrap'])
    .controller('TabsDemoCtrl', function($scope) {
  
      $scope.tab1Show = false;
      $scope.initialActive = $scope.tab1Show ? "0" : "1";
  
      $scope.tabs = [
        { title: 'Tab 1', content: 'Tab 1 Content', active: false, show: $scope.tab1Show },
        { title: 'Tab 2', content: 'Tab 2 Content', active: true, show: true },
        { title: 'Tab 3', content: 'Tab 2 Content', active: false, show: false },
        { title: 'Tab 4', content: 'Tab 2 Content', active: false, show: true },
        { title: 'Tab 5', content: 'Tab 2 Content', active: false, show: true }
      ];
  
    });
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>There are typos in the <code>content</code> of the tabs, but it doesn't really affect the question and the results, as the question is really only concerned with the tab 2 content, which is correct.</p>