Using ng-repeat with angular filter module

Question

I'm using Angular Filter plugin to group the tr's in a table. Current structure is below

<tbody>
      <tr ng-repeat="row in data |groupBy: 'row' | orderBy : 'row'">
         <td ng-repeat="person in row">{{person.row}}.{{person.name}}</td>    
      </tr>
</tbody>

I'm trying to add 2 td's into tr as below

<tbody>
      <tr ng-repeat="row in data |groupBy: 'row' | orderBy : 'row'">
         <td ng-repeat="person in row"><span>{{person.name}}</span></td>
         <td colspan="{{person.colspan}}" ng-repeat="person in row"><input type="text" /></td>    
      </tr>
</tbody>

But td's with spans are added first and then the td's with input fields are added which is not what I want

Plnkr : http://plnkr.co/edit/GaW4XsAwlDkFs61VXkOl?p=preview

Answer 1

The documentation of ngRepeat says:

To repeat a series of elements instead of just one parent element, ngRepeat (as well as other ng directives) supports extending the range of the repeater by defining explicit start and end points by using ng-repeat-start and ng-repeat-end respectively. The ng-repeat-start directive works the same as ng-repeat, but will repeat all the HTML code (including the tag it's defined on) up to and including the ending HTML tag where ng-repeat-end is placed.

So you want

<td ng-repeat-start="person in row"><span>{{person.name}}</span></td>
<td colspan="{{person.colspan}}" ng-repeat-end><input type="text" /></td>