Ng-click and ng-show don't work on dynamical content (angular)

Question

Why Ng-click and ng-show don't work on dynamical content, while if i try to switch static tabs everything works fine? What do i need to do, so i could click trough profiles tabs? How to achieve desired effect with smallest code footprint? I 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>

Let say for example that i have profiles object:

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

Thank you in advance!

Answer 1

Set 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