Accessing the state of AngularUI tab from within the elements it contains

Question

I've used AngularUI to build Bootstrap-themed tabs:

<tabset>
    <tab>
        <tab-heading>Javascript <span class="badge">{{ count }}</span></tab-heading>
    </tab>
    <tab>
        <tab-heading>Python <span class="badge">{{ count }}</span></tab-heading>
    </tab>
    <tab>
        <tab-heading>Ruby <span class="badge">{{ count }}</span></tab-heading>
    </tab>
</tabset>

See those <span>'s with {{ count }}? I'd like them to be shown only if their containing tab is selected (active). Something like this would be perfect:

<span ng-show="tab.active" class="badge">{{ count }}</span>

This does not work, so I wrote functions $scope.setActiveTab and $scope.isTabActive and now my code looks like this:

<tab select="setActiveTab(0)">
    <tab-heading>Javascript <span ng-show="isTabActive(0)" class="badge">{{ count }}</span></tab-heading>
</tab>
<tab select="setActiveTab(1)">
    <tab-heading>Python <span ng-show="isTabActive(1)" class="badge">{{ count }}</span></tab-heading>
</tab>
<tab select="setActiveTab(2)">
    <tab-heading>Ruby <span ng-show="isTabActive(2)" class="badge">{{ count }}</span></tab-heading>
</tab>

This works, but seems ugly. (Let alone this won't work with more than one tabset).

Is there a better way to access the state of the tab from within those spans?

Plunker with my current code: http://plnkr.co/edit/Id3aSU4NPcPNJO6gXuoo

Answer 1

This would work a bit easier in an ng-repeat

<tab ng-repeat="tab in tabs" active="tab.active">
...
ng-show="tab.active" 

Fiddle