angularjsangular-ui-bootstrapangular-uiangular-ui-tabset

Angular UI - set active tab programmatically

I 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 tab "2" to be the active.

How this can be done?

Solution

  • You need to use the active property on ui-tabset. Then You need to have indexes on each tab to work from outside 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