nested ng-repeat that one depend on the other

Question

I have an issue with angular, I want to use two nested ng-repeat in a data table where the first get the data, and the second get the name of field to be retrieved from the data (retrieved in the first ng-repeat)
here is what I tried to do with code :

<table md-table flex-order-gt-sm >
  <thead md-head>
    <tr md-row >
   //1st : get the name of fields, not a problem
        <th md-column ng-repeat="field in fields">{{item.name}}</th>
            </tr>
    </thead>
    <tbody md-body>
       <tr md-row ng-repeat="item in items">
            <td md-cell ng-repeat="field in fields" >
   //here is the problem I want to get the item that it's field name is field
                     {{item.{{field}} }}</td>
                </tr>
            </tbody>
        </table>

for example if fields contain :{'a','b','c'}
and items contains {'a':'1','b':'2','c':'3'};
I want for example for the 1st iteration of {{item.{{field}} }} to return 1

Answer 1

Use toString() to retrieve the scope data in an scope object.

<tr md-row ng-repeat="item in items">
    <td md-cell ng-repeat="field in fields" >
        {{item[field.toString()]}}
    </td>
</tr>

Here is the plunker