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 updated when switching tab. Can one specify a callback function when a tab is selected?

Update with code example.

The code very much follows the example from the Angular UI bootstrap page.

Markup:

<div ng-controller="TabsDemoCtrl">     <tabs>         <pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active">             <div ng-include="pane.template"></div>         </pane>     </tabs> </div> 

Controller:

var TabsCtrl = function ($scope) {   $scope.panes = [     { title:"Events list", template:"/path/to/template/events" },     { title:"Calendar", template:"/path/to/template/calendar" }   ]; }; 

Answer 1

Actually this is really simple as each pane exposes the active attribute that supports 2-way data binding:

<tabs>     <pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active">               {{pane.content}}     </pane> </tabs> 

and then an active tab can be easily found, for example:

$scope.active = function() {     return $scope.panes.filter(function(pane){       return pane.active;     })[0]; }; 

Here is a working plunk