Accéder à l'état de l'onglet AngularUI à partir des éléments qu'il contient

Question

J'ai utilisé AngularUI pour créer des onglets sur le thème Bootstrap :

<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>

Voir ceux <span>c'est avec {{ count }}?J'aimerais qu'ils soient montrés seulement si leur onglet contenant est sélectionné (actif).Quelque chose comme ça serait parfait :

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

Cela ne fonctionne pas, alors j'ai écrit des fonctions $scope.setActiveTab et $scope.isTabActive et maintenant mon code ressemble à ceci :

<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>

Cela fonctionne, mais semble moche.(Et encore moins, cela ne fonctionnera pas avec plus d'un onglet).

Existe-t-il un meilleur moyen d'accéder à l'état de l'onglet à partir de ces plages ?

Plunker avec mon code actuel : http://plnkr.co/edit/Id3aSU4NPcPNJO6gXuoo

Answer 1

Cela fonctionnerait un peu plus facilement dans un ng-repeat

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

Violon