UIB tabset is not working

Question

<div class="ui-tab-container">
    <uib-tabset>
        <uib-tab heading="Region Wise" index="region" active="region_wise">Tab 1</uib-tab >
        <uib-tab heading="Branch Wise" index="branch" active="state_tab">Tab 2</uib-tab>
        <uib-tab heading="City Wise" index="city" active="city_tab">Tab 3</uib-tab>
        <uib-tab heading="Counter Wise" index="counter" active="counter_tab">Tab 4</uib-tab>
    </uib-tabset>
</div>

No tabs are getting displayed and when I switched to bootstrap tabsets they worked fine but I was not able to switch from 1 tab to another on clicking a button on first tab even though I set the active property of that tab to true from inside the function of the button(when clicked) "bootstrap": "~3.3.0" "angular-bootstrap": "~2.3.1" Thanks in advance.

Answer 1

Try this

<uib-tabset active="'region'">
    <uib-tab heading="Region Wise" index="'region'" active="region_wise">Tab 1</uib-tab >
    <uib-tab heading="Branch Wise" index="'branch'" active="state_tab">Tab 2</uib-tab>
    <uib-tab heading="City Wise" index="'city'" active="city_tab">Tab 3</uib-tab>
    <uib-tab heading="Counter Wise" index="'counter'" active="counter_tab">Tab 4</uib-tab>
</uib-tabset>

You forget to add the active directive to the uib-tabset and give it a value

active (Default: Index of first tab) - Active index of tab. Setting this to an existing tab index will make that tab active.

Also you didn't instantiated the active values inside your uib-tab elements

Tab index. Must be unique number or string.

So it should be either like this index="'region'" (note the single apostrophe inside, index expects an expression!!) or index="1"

plunk

Answer 2

据我了解， ui-tab内部的active指令必须与模型中的一些布尔变量绑定。

<uib-tab ... active="boolean_variable_to_bind">...</uib-tab >