Using nested ng-repeat with object arrays angular

Question

Here is what I am trying to do:

<tr ng-repeat = "data in tabularData track by $index" >
             <td ng-repeat ="(key,value) in usedAttributes" >{{data[key]}}</td>

        </tr>

This DID work when the tabular Data was structured like this:

[3920F0-3434D3-ADF-3SDF:[{CreatedBy: "John Doe", CreatedDate: "10-20-2016"}]

However when I flattened it out, it looks more like this:

[{CreatedBy: "John Doe", CreatedDate: "10-20-2016",PrimaryID:"3920F0-3434D3-ADF-3SDF"}]

This does not work. I feel like I'm missing something very obvious.

usedAttributes is just a simple object array containing attributes (column data). The idea is that the user can choose the attributes they want to get so the data table is very dynamic. For this example, the usedAttributes may look like this:

["CreatedBy": [{Checked:false}],"CreatedDate":[{Checked:true}]]

Thus the user wants to see these two attributes although more exists.

Answer 1

You can do this,

 <div ng-controller="listController">
    <table class="table table-striped">
      <thead>
        <tr>
          <th ng-repeat="(key, value) in tabularData[0]">{{key | uppercase }}
          </th>
        </tr>
        <tbody>
          <tr ng-repeat="val in tabularData">
            <td ng-repeat="cell in val">
              <input type="text" ng-model="cell">
            </td>
          </tr>
        </tbody>
    </table>
  </div>

DEMO