Ng-click i ng-show nie działają na zawartości dynamicznej (kątowej)

Question

Dlaczego Ng-click i ng-show nie działają na zawartości dynamicznej, a jeśli spróbuję zmienić statyczne zakładki, wszystko działa poprawnie? Co muszę zrobić, abym mógł kliknąć zakładki profili korytowych? Jak osiągnąć pożądany efekt przy najmniejszym śladzie kodu? Mam nadzieję, że mi pomożesz.

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

powiedzmy na przykład, że mam profile obiektu:

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

Z góry dziękuję!

Answer 1

Ustaw funkcję dla dyrektywy 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