Trouble with active tab default using AngularJS, UI Boostrap, and UI Router

Question

When using a UI Boostrap tabset along with nested sticky states created with ui-router and ui-router-extras, I have an issue where navigating to a tab's state via URL will select the first tab along with the correct tab. It should only activate the tab whose state matches the URL route.

Here's what the tabset looks like:

<div style="position:relative">
      <tabset>
        <tab heading="Dashboard" ui-sref="LMS.Dashboard" ui-sref-active="active"></tab>
        <tab heading="Modules" ui-sref="LMS.Modules" ui-sref-active="active"></tab>
        <tab heading="Messages" ui-sref="LMS.Messages" ui-sref-active="active"></tab>
        <tab heading="Settings" ui-sref="LMS.Settings" ui-sref-active="active"></tab>
      </tabset>
      <div ui-view="Dashboard" class="tab-content" ng-show="$state.includes('LMS.Dashboard')">
          <h2>Dashboard</h2>
          {{test}}
      </div>
      <div ui-view="Modules" class="tab-content" ng-show="$state.includes('LMS.Modules')">
          <h2>Modules</h2>
      </div>
      <div ui-view="Messages" class="tab-content" ng-show="$state.includes('LMS.Messages')">
          <h2>Messages</h2>
      </div>
      <div ui-view="Settings" class="tab-content" ng-show="$state.includes('LMS.Settings')">
          <h2>Settings</h2>
      </div>
    </div>

I have a plunker here:

http://plnkr.co/edit/sQB58YKntDwNIUpAdLmT?p=preview

To see the issue, select a tab other than 'Dashboard', then reload the "live view" frame.

Another way is to open it in a window, switch the tab, then reload.

Answer 1

I have the same issue. Add active="false" to disable default behavior and use ui-sref-active to add active class.

<tab ui-sref-active="active" active="false">

Edit

While this method seems to works, it produces error because false is not assignable.

Edit 2

Combining ng-init with a local scope variable seems to do the trick.

<tab ui-sref-active="active" active="isActive" ng-init="isActive=false">

In your case, it might be simpler to just add an active variable for each tab. See this plunker: http://plnkr.co/edit/73lm068buZf851h47FVQ?p=preview