AngularJS: why my button are still active with ng-repeat track by $index

Question

I have a problem with ng-repeat:

Here is my html file

<body ng-app="TestApp" ng-controller="TestAppCtrl">
    <button ng-repeat="value in array"  class="btn btn-primary" ng-click="onclick($event)" id={{value}} >{{value}}</button>
    <br>
    <div class"btn-group" data-toggle="buttons">
        <label ng-repeat="data in arrayToPrint track by $index "   class="btn btn-primary">
            <input type="checkbox"  autocomplete="off" >{{data}}
        </label>
    </div>
</body>

Here is my controller:

angular.module('TestApp',[])
.controller('TestAppCtrl', function ($scope) {
    $scope.array=["gps","meteo"];
    var array1=["lat","lon"];
    var array2=["airtemp","watertemp","pressure"];
    $scope.onclick=function(event){
        if(event.target.id=="gps"){
            $scope.arrayToPrint=array1;
        }else {
            $scope.arrayToPrint=array2;
        }
    }
});

When I clic on the first button (gps), the array of button lat, lon appears.

I select lat button to make it active.

But my problem is when I clic on the second button (meteo) the first button is active.

I don't have the problem if I remove "track by $index" in my ng-repeat.

But I don't know why.

no need to use the element ID...can simply use `ng-click="oncick(value)"` — charlietfl, Sep 09 '15 at 23:57
Here is the plunker link: http://plnkr.co/edit/aFL6hyZhHlfokc6IaNp1 — Ludo, Sep 10 '15 at 07:08

score 1 · Accepted Answer · answered Sep 10 '15 at 07:28

I think I have the answer that is explain in this post: http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm

When I use track by index, javascript object and DOM node are associated wih the index. I first click on gps button => I have 2 DOM nodes on for lat and for lon

I click on meteo button, => It only creates one more node for the third button.

AngularJS: why my button are still active with ng-repeat track by $index

1 Answers1