AngularJS nested ng-repeat access to Index

Question

I have nested array so I had to use 3 times ng-repeat

    <div ng-repeat = "cat in cats"  >

          <div ng-repeat = "kitty in cat  "  >

             <button ng-click="delete($index)">Delete</button>

      </div>
   </div>
 </div>

So my problem is that I can't get access to 2nd ng-repeat $index , any ideas ?

Answer 1

This is the purpose of the ng-init directive

<div ng-repeat="cat in cats" ng-init="catIndex = $index">
   <div ng-repeat="kitty in cat">
        <button ng-click="delete(catIndex)">Delete</button>
   </div>
</div>

Alternatively use (index, value) formatting:

<div ng-repeat="(catIndex, cat) in cats">
   <div ng-repeat="kitty in cat">
        <button ng-click="delete(catIndex)">Delete</button>
   </div>
</div>

Answer 2

<div ng-repeat = "cat in cats track by $catIndex"  >

          <div ng-repeat = "kitty in cat track by $kittyIndex "  >

             <button ng-click="delete($kittyIndex)">Delete</button>

      </div>
</div>