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