nested ng-repeat doesn't work

Question

I am using ng-table to put an array structure into a table the following way :

<table ng-table="tableParams" class="table" ng-controller="VenueListCtrl">
  <tbody>
    <tr ng-repeat="entry in venues">
      <div ng-repeat="(key, val) in entry">
        <td data-title="key">
          {{val}}
        </td>
      </div>
    </tr>
  </tbody>
</table>

Consider venues to be :

[{"id":"C001","name":"Bobo"},{"id":"C002","name":"Shobo"},{"id":"C003","name":"Soho"}]

The first ng-repeat works okay as I can see the 3 rows in the table. The second ng-repeat doesn't seem to work.

What am I doing wrong ?

Answer 1

A Table Row Element (<tr>) can not accept a <div> as a child. You must directly use the second ngRepeat on the Table Cell Element (<td>):

<table ng-table="tableParams" class="table" ng-controller="VenueListCtrl">
  <tbody>
    <tr ng-repeat="entry in venues">
      <td ng-repeat="(key, val) in entry" data-title="key">
        {{val}}
      </td>
    </tr>
  </tbody>
</table>

Answer 2

<div> element can't be a direct child of <tr>. You need to simply put your inner ngRepeat on tdelement:

<table ng-table="tableParams" class="table" ng-controller="VenueListCtrl">
  <tbody>
    <tr ng-repeat="entry in venues">
      <td ng-repeat="(key, val) in entry" data-title="key">
        {{val}}
      </td>
    </tr>
  </tbody>
</table>