Tabs shifting in angular bootstrap ui

Question

I am new to angular bootstrap ui. Here i am using two uib-tabset. Based on shifting the main menu tag index value the sub menu tag index value changing. This is my code link [plnkr attached].

<uib-tabset active="active">

    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}">
      <uib-tabset active="active">
        <uib-tab index="$index + 1" ng-repeat="tab in subtabs" heading="{{tab.title}}">
          {{ tab.content }}
        </uib-tab>    
      </uib-tabset>
    </uib-tab>

  </uib-tabset>

You can notice that when i am shitfing to second tab the submenu tag defaultly selected as second submenu tag and same for the third tag and so on. So what i need is when changing to second or third tag the default submenu tag should be first one. LINK

Answer 1

You can set your active model to your sub tab index everytime when parent tab changes.

Demo Plunkr

<uib-tab index="$index" ng-repeat="tab in tabs" heading="{{tab.title}}" select="activeSub = tabs.length">
  <uib-tabset active="activeSub">
    <uib-tab index="tabs.length + $index" ng-repeat="tab in subtabs" heading="{{tab.title}}">
      {{ tab.content }}
    </uib-tab>    
  </uib-tabset>
</uib-tab>

Here, you can see I assign model as activeSub to your child tabs which means whenever $scope.activeSub is having index number same as your any child tab, it will get selected. However index of tabs should be unique so for that I've used tabs.length + 1 to make it unique. Now when user change the we can change $scope.activeSub using select event of the tab to the first child tab index.