Dynamically set tab in AngularUI Bootstrap (ui.bootstrap.tabs)
<p>I am using the tabs directive of AngularUI Bootstrap with dynamically generated tabs.</p>

<pre><code>&lt;div ng-controller="TabsDemoCtrl"&gt;
&lt;uib-tabset active="activeForm"&gt;
  &lt;uib-tab  index="$index" ng-repeat="tab in tabs" &gt;
    &lt;uib-tab-heading&gt;{{tab.title}}&lt;/uib-tab-heading&gt;
    {{tab.content}}
  &lt;/uib-tab&gt;
&lt;/uib-tabset&gt;
</code></pre>

<p></p>

<p>When the tabs array is changed the UI Tabs get amended accordingly but no active tab is set (although I explicitly do set in in the controller)</p>

<pre><code>angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope, $window) {
  $scope.tabs = [
    { title:'Dynamic Title 1', content:'Dynamic content 1' },
    { title:'Dynamic Title 2', content:'Dynamic content 2' },
    { title:'Dynamic Title 3', content:'Dynamic content 3' },
    { title:'Dynamic Title 4', content:'Dynamic content 4' }
  ];

  $scope.changeTabs = function(){
         $scope.tabs = [
       { title:'Dynamic Title 5', content:'Dynamic content 5' },
       { title:'Dynamic Title 6', content:'Dynamic content 6' }
     ];
     $scope.activeForm = 0; //Not working, how can I select tab dynamically?
  };

  $scope.model = {
    name: 'Tabs'
  };
});
</code></pre>

<p>Can anybody tell me what I am missing? </p>

<p>See here for Plunker: <a href="https://plnkr.co/edit/Ow7Cd1eidCgaLNOhX1Vl" rel="nofollow">https://plnkr.co/edit/Ow7Cd1eidCgaLNOhX1Vl</a></p>

<p>Thanks in advance
Paul</p>