How to get AngularStrap active tab?

Question

How to get AngularStrap active tab?

I am somewhat new to using Angular and AngularStrap directives. I need to use the tab directive with static markup like the example:

<div data-fade="1" bs-tabs>
  <div data-title="'Home'"><p>Static tab content A</p></div>
  <div data-title="'Profile'"><p>Static tab content B</p></div>
</div>

On another part of the page I would like to display a div only when the first tab is selected. The div is not part of the tabs, but is in the same overall controller. How can I show/hide this div based on the selected tab?

Something like this?

<div ng-show="???? active tab stuff here ????">Home tab is selected</div>

Thanks for any help.

angularjs

Answer 1

As shown in the example on the AngularStrap page the active tap is stored in

tabs.activeTab

So you can use this property to conditionally show display something else like so

<div ng-show="tabs.activeTab == 0">The first tab is active</div>

UPDATE

Even with non object tabs you can just bind a model against the bs-tabs to store the active ID like so:

<div data-fade="1" ng-model="tabs.activeTab" bs-tabs>

Here is an updated plnkr. (Click on the 3rd tab and see the 'Test' text appear)

Answer 2

I found somewhat of a hack to resolve this issue for now. This does not seem like the best approach, so if someone has a better idea, please share.

I realized that the bsTabs directive is creating data-toggle attributes for each tab. By watching the data-toggle shown event, I am able to recognize the tab change and display the div. The controller code looks like this:

    $scope.HomeTabSelected = true;

    function watchTab() {
        $('a[data-toggle="tab"]').on('shown', function (e) {
            $scope.$apply($scope.HomeTabSelected = (e.target.innerHTML == "Home"));
        })
    }

    setTimeout(watchTab, 2000);  // setTimeout necessary to allow directive to render

and the HTML div uses ng-show.

    <div ng-show="HomeTabSelected">Home tab is selected</div>