AngularJS: Add toggle function to an image inside ng-repeat <p>I am using ng-repeat for div element. I have a toggle function on image inside div element. However, when I click on image, function gets triggered but it is showing up same data for all divs. Below is the code. </p> <p><strong>HTML :</strong></p> <pre><code>&lt;div ng-repeat="item in items"&gt; &lt;div&gt; &lt;img src="img/icon1.png" class="pull-right" ng-click="showDiv(item.itemId,$index)"&gt; &lt;/div&gt; &lt;div ng-show="hiddenDiv[$index]"&gt; &lt;div ng-repeat="student in studentData"&gt; &lt;div class="row"&gt; &lt;div&gt; &lt;div&gt;{{student.name}}&lt;/div&gt; &lt;div&gt;{{student.adress}}&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>JS :</strong></p> <pre><code>$scope.hiddenDiv=[]; $scope.showDiv=function(itemId,index) { $scope.hiddenDiv[index] = !$scope.hiddenDiv[index]; var myResult = ListService.getList(url here); myResult.then(function (data) { if(data &amp;&amp; data.list) $scope.studentData = data.list; }); } </code></pre> <p>Here, I am using same scope variable in all divs inside ng-repeat. </p> <p><strong>Updated Answer :</strong></p> <p><strong>js :</strong></p> <pre><code>$scope.studentData = []; $scope.studentData[index] = data.list; </code></pre> <p><strong>HTML :</strong></p> <p></p>