How to obtain index in nested ng-repeats

Question

I have an ng-repeat within a ng-repeat. I am tyring to obtain the index at both levels but am not able to :

<tbody>
    <tr ng-repeat="element in body">
      <td ng-repeat="h in header" style="width:{{h.width}}px">
        <div col="{{$parent.$parent.$index}}" row="{{$parent.$index}}">{{element[h.column]}}</div>
      <td>
    </tr>
  </tbody>  

here is a plnkr too. http://plnkr.co/edit/dGoN43HzQefVpCsp2R3j

The ISSUE is that value of "col" never gets populated. It does not capture the index. Can anyone assist

Answer 1

You do not have to use $parent, just use $index to get index of inner loop and use indexOf() function of array to get index of outer loop...

HTML

<tr ng-repeat="element in body">
  <td ng-repeat="h in header" style="width:{{h.width}}px">
    <div col="{{body.indexOf(element)}}" row="{{$index}}">{{element[h.column]}}</div>
  <td>
</tr>

---

UPDATE

Actually using ng-init would much better to get index of outer loop... here you can easily set rowIndex to current index at every turn and use it in inner loop...

  <tbody>
    <tr ng-repeat="element in body" ng-init="rowIndex = $index">
      <td ng-repeat="h in header" style="width:{{h.width}}px">
        <div col="{{$index}}" row="{{rowIndex}}">{{element[h.column]}}</div>
      <td>
    </tr>
  </tbody> 

here is updated PLUNKER