How to tell which bootstrap tab is selected in Angular-UI

Question

Is there a way to tell which tab that has been selected when using the Bootstrap tabs in Angular UI?

I tried watching the panes array but it deosn\'t seem to be upda

Answer 1

The accepted answer works only for dynamic tabs.

For static tabs, you can set the active attribute of uib-tabset directive to a scope property, and compare it with the tab index to find the active tab.

For example, in the below code I'm doing so to set a class on active tab header (I can use the active class added by ui.bootstrap and achieve the same result, I'm doing so as an example):

angular.module('test', ['ngAnimate', 'ui.bootstrap']);

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css");
 .test {
  background: dodgerblue;
}

  
    
      Static title1Static content1
    
    
      Static title1Static content2
    
      Static title1Static content3