How to get AngularStrap active tab?

Question

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.

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)