angulaire-ui-tabset: modifier le contenu de l'onglet actif

Question

J'utilise ui-tab dans mon application angular. J'ai 2 onglets (tab1 et tab2) et je veux mettre tab1 comme l'actif par programmation quand un bouton dans la tab2.

Ceci est mon code html:

 <uib-tabset active="active" justified="true"> 
     <uib-tab id="tab1" index="0" heading="Tab 1" ng-click="active= 0"> 
    <!-- content1 --> 
     </uib-tab> 
    <uib-tab id="tab2" index="1" heading="Tab 2" ng-click="active= 1"> 
    <!-- content2 --> 
<button ng-click="goToTab1()"> Go to tab 1</button> 
    </uib-tab> 
    </uib-tabset> 

Et ceci est la mise en œuvre goToTab1():

$scope.goToTab1 = function() { 
      angular.element(document.querySelector("#tab1")).removeClass("active"); 
      angular.element(document.querySelector("#tab2")).addClass("active"); 
} 

Mon problème:

Lorsque je clique sur le bouton (dans le tab2) le tab1 est sélectionné mais le contenu affiché reste le contenu de tab2. Aussi quand après je clique sur l'onglet 2, rien n'est arrivé jusqu'à ce que je clique sur l'onglet 1 de plus alors si je clique sur l'onglet 2 cela fonctionne.

Modifier

J'ai déjà essayé la solution dans ce issue, mais je reçois le même problème. Aussi quand je change la valeur active directement dans le ng-click, il n'a pas d'effet du tout

<button ng-click="active = 0"> Go to tab 1</button> 

Answer 1

<uib-tabset active="current" justified="true"> 
    <uib-tab id="tab1" index="0" heading="Tab 1" ng-click="current = 0"> 
    <!-- content1 --> 
    </uib-tab> 
    <uib-tab id="tab2" index="1" heading="Tab 2" ng-click="current = 1"> 
    <!-- content2 --> 
    <button ng-click="goToTab1()"> Go to tab 1</button> 
    </uib-tab> 
</uib-tabset> 

$scope.goToTab1 = function() { 
    $scope.current = 0; 
}; 

Answer 2

Selon this question, vous devez factoriser

<button ng-click="active = 0"> Go to tab 1</button> 

Pour

<button ng-click="$parent.$parent.active = 0"> Go to tab 1</button> 

Je pense qu'une meilleure apprache serait utilisé vues/directives avec leurs propres champs d'application et masquer/afficher selon des active