angularjs: ng-repeat-start and ng-repeat-end with inner ng-repeat

Question

Hi I have a simple use case for ng-repeat-start and end and is working just fine, the problem appears when I want to add an inner ng-repeat. Here is the my code

<tr ng-repeat-start="obj in rows" >
  <td ng-repeat="e in obj.row">{{e}}</td>
</tr>
<tr ng-repeat-end>
  <td colspan="4">{{obj.description}}</td>
<tr>

The inner ng-repeat into td element is not working, I'm seeing the ngRepeat comment when I inspect the html source code, but the td elements are not being created.

<!-- ngRepeat: e in obj.row -->

My ugly workaround (given that I know the size of that vector) is:

<tr ng-repeat-start="obj in rows" >
  <td>{{obj.row[0]}}</td>
  <td>{{obj.row[1]}}</td>
  <td>{{obj.row[2]}}</td>
  <td>{{obj.row[3]}}</td>
</tr>
<tr ng-repeat-end>
  <td colspan="4">{{obj.description}}</td>
<tr>

Answer 1

I am not sure whether you are using angular 1.1.6 or not since ng-repeat-start and ng-repeat-end are not available in 1.1.5 or 1.0.7 yet.

However, you don't actually have to use the new directives to achieve that. You can simply implement it like this for right now:

<table>
    <tbody ng-repeat="obj in rows">
        <tr ng-repeat="e in obj.row">
            <td>{{e}}</td>
        </tr>
        <tr>
            <td colspan="4">{{obj.description}}</td>
        <tr>
    </tbody>
</table>

You may use ng-repeat-start and ng-repeat-end to reimplement it when AngularJS 1.1.6 version is officially released.

Demo

Answer 2

I think it might be something wrong with your data structure. Using Angular 1.2.1 this works for me

<div ng-app="myApp" ng-controller="myCtrl">
    <div class="h" ng-repeat-start="val in data">{{val.title}}</div>
    <div ng-repeat="con in val.content">
        {{con}}
    </div>
    <div class="b" ng-repeat-end>footer</div>
</div>

See jsFiddle

Answer 3

You should be able to use index-based iterations to bypass that:

<tr ng-repeat-start="obj in rows" >
  <td ng-repeat="e in obj.row">{{obj.row[$index]}}</td>
</tr>
<tr ng-repeat-end>
<!-- ... -->