Angular UI - programmatically setting the active tab

Question

I am using AngularUI with this code:

<uib-tabset type="pills"> <uib-tab heading="Tab 1">Tab 1 content</uib-tab> <uib-tab heading="Tab 2">Tab 2 content</uib-tab> </uib-tabset> 

I want to programmatically change the current active tag from my angular -controller code. For example, select the tab “2” so that it is active.

How can I do that?

Answer 1

You need to use the active property on ui-tabset. Then you need to have indexes on each tab to work from the external context.

 <uib-tabset type="pills" active="active"> <uib-tab heading="Tab 1" index="0">Tab 1 content</uib-tab> <uib-tab heading="Tab 2" index="1">Tab 2 content</uib-tab> </uib-tabset> 

See this working plnkr: working plnkr

Answer 2

I had the same problem and this answer helped me figure it out.

I used two variables in the scope: $scope.showTabsInView and $scope.activeTabIndex .

The default values ​​are:

 $scope.showTabsInView = false; $scope.activeTabIndex = 0; 

First I loaded my dynamic tabs , then I set the value to activeTabIndex . Then I changed the value of showTabsInView to true.

 <uib-tabset ng-if="showTabsInView" active="activeTabIndex"> <uib-tab data-ng-repeat="tab in tabs" heading="{{tab.title}}">{{tab.content}}</uib-tab> </uib-tabset> 

You can simply ignore dynamic tabs and $scope.showTabsInView if your case is not so complicated.