uib-tabset动态索引不起作用

Question

I am trying to set uib-tabs dynamically. I mean I have written all the codes in html and only taking index dynamically see the code. I have simplified the example here. I gave index="1" to very first tab but it's not working as required.

 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script> <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.0.0.js"></script> <div ng-app="uib-tabs.demo" ng-controller="TabsDemoCtrl"> <!--I have given index 1 to Static tab still it's at index 0. actually in my code I am calling a function from index which returns the index somethiing like this <uib-tab index="findMyIndex('static')" heading="Static title">Static content</uib-tab>--> <uib-tabset active="active"> <uib-tab index="1" heading="Static title">Static content</uib-tab> <uib-tab index="0" select="alertMe()"> <uib-tab-heading> <i class="glyphicon glyphicon-bell"></i> Alert! </uib-tab-heading> I've got an HTML heading, and a select callback. Pretty cool! </uib-tab> </uib-tabset> </div> <script> angular.module('uib-tabs.demo', ['ngAnimate', 'ui.bootstrap']) .controller('TabsDemoCtrl', function ($scope, $window) { $scope.tabs = [ { title:'Dynamic Title 1', content:'Dynamic content 1' }, { title:'Dynamic Title 2', content:'Dynamic content 2', disabled: true } ]; $scope.alertMe = function() { setTimeout(function() { $window.alert('You\\'ve selected the alert tab!'); }); }; $scope.model = { name: 'Tabs' }; }); </script> 

Thanks in Advance.

I can't use ng-repeat with tabs as they are different and my HTML file is too large

Answer 1

You can use $index to set the tabs index dynamically and ng-repeat to generate the tabsets.

<uib-tabset active="active">
  <uib-tab  index="$index" ng-repeat="tab in tabs" >
    <uib-tab-heading>{{tab.title}}</uib-tab-heading>
    {{tab.content}}
  </uib-tab>
</uib-tabset>