get index of active tab

Question

I would like to get the index of the active tab in the JS side.

Here is my code:

HTML:

<uib-tabset>
   <uib-tab ng-repeat="item in tabs" active="item.active" TabIndex="{{item.id}}" heading="{{item.name}}"></uib-tab>
</uib-tabset>

JS:

Category.findAll().$promise.then(function (result) {
      $scope.tabs = result;
    }); 

Here is a screenShot, to show the tabs after lunching the page:

I want to get the index: 4 or 3(TabIndex="{{item.id}}") on my js side, onchange but also when the page loads.

Answer 1

You can bind a scope variable to active property of uib-tabset component:

<uib-tabset active="activeTab">
   <uib-tab ng-repeat="item in tabs" active="item.active" TabIndex="{{item.id}}" heading="{{item.name}}" select="alertMe($event, $index)></uib-tab>
</uib-tabset>

and in your controller you can select the tab or just listening to tab change events:

Category.findAll().$promise.then(function(result) {
    $scope.tabs = result;
    $scope.activeTab = 1; //set 2nd tab

    $scope.$watch('activeTab', function(newVal) {
       console.log(newVal);   //listen to tab change events
    });

 });

See this fiddle if you need.

Answer 2

select() - An optional expression called when tab is activated. Supports $event in template for expression.

<uib-tabset>
  <uib-tab ng-repeat="item in tabs" active="item.active" TabIndex="{{item.id}}" heading="{{item.name}}" select="alertMe($event, $index)></uib-tab>
</uib-tabset>

alertMe is a function inside controller

$scope.alertMe = function(e, index) {
   console.log(e, index)
 };