Ng-click and ng-show do not work with dynamic content (angular)

Question

Why don't Ng-click and ng-show work with dynamic content, and if I try to switch static tabs, everything works fine? What do I need to do so that I can click on profile profile tabs? How to achieve the desired effect with a minimum code value? Hope you guys can help me.

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

Say, for example, that I have a profile:

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

Thank you in advance!

Answer 1

Define a function for your ng-click directive.

 <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