No1Lives4Ever No1Lives4Ever - 4 months ago 135
AngularJS Question

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>

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?


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>

See this working plnkr: Working Plnkr