title: UI-bootstrap - Add a tab and select it by default
body: <p>I'm trying to make a tab system using ui-bootstrap.</p>
  
  <p>It's nearly fine but I'm still having trouble with the last tab when I add one.
  Adding one tab is OK, but if I want to select it automatically once it's created, I've got a weird behaviour :
  One tab added : fine
  One tab added : not selected
  One tab added : fine
  One tab added : not selected
  and so on ...</p>
  
  <p>I've made a <strong><a href="http://plnkr.co/edit/18ZLXFeUJlH2EuOy9FI7?p=preview" rel="nofollow">plunkr</a></strong> to demonstrate my bug, just click multiple times on the "+" button and have a look to which tab is selected.</p>
  
  <p>Here's the JS code : </p>
  
  <pre><code>angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
  angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope) {
  
    $scope.tabs = [{
      title: 'Dynamic Title 1',
      content: 'Dynamic content 1',
      active: false
    }, {
      title: 'Dynamic Title 2',
      content: 'Dynamic content 2',
      active: false
    }];
  
    $scope.addTab = function() {
      $scope.tabs.push({
        title: 'Dynamic Title ' + ($scope.tabs.length + 1),
        content: 'Dynamic content ' + ($scope.tabs.length + 1)
      });
  
      $scope.active = $scope.tabs.length - 1;
    };
  
  });
  </code></pre>
  
  <p>Here's the HTML code : </p>
  
  <pre><code>  &lt;div ng-controller="TabsDemoCtrl"&gt;
      &lt;p&gt;Select a tab by setting active binding to true:&lt;/p&gt;
      &lt;p&gt;
        &lt;button type="button" class="btn btn-default btn-sm" ng-click="active = 1"&gt;Select second tab&lt;/button&gt;
        &lt;button type="button" class="btn btn-default btn-sm" ng-click="active = 2"&gt;Select third tab&lt;/button&gt;
      &lt;/p&gt;
      &lt;p&gt;
        &lt;button type="button" class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled"&gt;Enable / Disable third tab&lt;/button&gt;
      &lt;/p&gt;
      &lt;hr /&gt;
  
      &lt;uib-tabset active="active"&gt;
        &lt;uib-tab index="$index" ng-repeat="tab in tabs" heading="{{tab.title}}"&gt;
          {{tab.content}}
        &lt;/uib-tab&gt;
      &lt;/uib-tabset&gt;
  
      &lt;br /&gt;&lt;br /&gt;
  
      &lt;button ng-click="addTab()"&gt;plus&lt;/button&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>Any help on this would be nice,</p>
  
  <p>Cheers</p>