Ng-click e ng-show non funzionano su contenuto dinamico (angolare)

Question

Perché Ng-click e ng-show non funzionano su contenuto dinamico, mentre se provo a cambiare le schede statiche tutto funziona correttamente? Cosa devo fare, quindi posso cliccare sulle schede dei profili? Come ottenere l'effetto desiderato con il minimo ingombro del codice? Spero che voi ragazzi possiate aiutarmi.

<div class="nav-tabs-custom"> 
      <ul class="nav nav-tabs"> 
       <li class="active"><a ng-click="tab=1" data-toggle="tab" aria-expanded="true" style="cursor: pointer;">Subscriber</a></li> 
       <li class=""><a ng-click="tab=2" data-toggle="tab" aria-expanded="true" style="cursor: pointer;">Devices</a></li> 
       <li class="" ng-repeat="p in profiles"><a ng-click="tab=p.uid" data-toggle="tab" aria-expanded="true" style="cursor: pointer;">{{p.name}}</a></li> 
      </ul> 

      <div class="tab-content"> 
       <!-- subscriber tab --> 
       <div class="tab-pane active" ng-show="tab==1" ng-init="tab=1"> 
        <div class="row"> 
         <div class="col-xs-12"> 
          sssssssssssssssssssssssssssssssss 
         </div> 
        </div> 
       </div> 
       <!-- subscriber tab --> 

       <!-- devices tab --> 
       <div class="tab-pane active" ng-show="tab==2"> 
        <div class="row"> 
         <div class="col-xs-12"> 
           dddddddddddddddddddddddddd 
         </div><!-- /.row --> 
        </div><!-- /.tab-pane --> 
       </div><!-- /.tab-pane --> 
       <!-- devices tab --> 

       <!-- profiles tab --> 
       <div class="tab-pane active" ng-repeat="p in profiles" ng-show="tab==p.uid"> 
        <div class="row"> 
         <div class="col-xs-12"> 
          ppppppppppppppppp 
         </div><!-- /.row --> 
        </div><!-- /.tab-pane --> 
       </div><!-- /.tab-pane --> 
       <!-- profiles tab --> 
      </div><!-- /.tab-content --> 
</div> 

diciamo per esempio che ho profili oggetto:

$scope.profiles=[ 
    { 
     "Name" : "Jhonny", 
     "uid" : "00000" 
    }, 
    { 
     "Name" : "Ken", 
     "uid" : "00001" 
    }, 
    { 
     "Name" : "Zelda", 
     "uid" : "00002" 
    }] 

Grazie in anticipo!

Answer 1

Impostare una funzione per la direttiva ng-click.

<div ng-app="myApp"> 
    <div ng-controller="MyCtrl"> 
    <div class="nav-tabs-custom"> 
       <ul class="nav nav-tabs"> 

        <li class="" ng-repeat="p in pies"><a ng-click="setTab(p)" >{{p.name}}</a></li> 
       </ul> 

       <div class="tab-content"> 

        <!-- profiles tab --> 
        <div class="tab-pane active" ng-repeat="p in pies" ng-show="tab==p.id"> 
         <div class="row"> 
          <div class="col-xs-12"> 
           {{p.name}} 
          </div><!-- /.row --> 
         </div><!-- /.tab-pane --> 
        </div><!-- /.tab-pane --> 
        <!-- profiles tab --> 
       </div><!-- /.tab-content --> 
    </div> 
    </div> 
    </div> 
</div> 

Javascript:

var myApp = angular.module('myApp',[]); 

//myApp.directive('myDirective', function() {}); 
//myApp.factory('myService', function() {}); 

function MyCtrl($scope) { 
    $scope.tab = 1; 
    $scope.setTab = function(p){ 
     $scope.tab = p.id; 
    } 
    $scope. pies = [ 
     {name:"kakaolu",id:1}, 
     {name:"kestane",id:2}, 
     {name:"fisne",id:3}, 
    ]; 
} 

Jsfiddle