John P John P - 4 months ago 44x
AngularJS Question

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

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.


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


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


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

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

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

$ = function() {
    return $scope.panes.filter(function(pane){

Here is a working plunk: