Challenge repeating tr with ng-repeat

Question

I'm struggling with a special use case. I provide you with a jsfiddle snippet at the bottom.

1. The HTML table

My HTML is a table. ng-repeat directive must be applied to an html element. In my use case, this cannot be done as an instance of ng-repeat is composed of a double tr element:

<!-- ng-repeat the following block n times -->
<tr>
 <td>text</td>
</tr>
<tr>
 <td tooltip="comment that is bound to the first tr">hover me</td>
</tr>

AngularJS doesn't provide a syntactic ng-repeat comment (unlike KnockoutJS). I found similar questions on SO. However the use case consisted of appending HTML inside an element. Mine would consist of placing a new tr after the ng-repeated tr, but it just didn't work. Besides, there is a new stuff to take into account.

2. The Tooltip directive

The second tr embeds a tooltip directive, which is taken from angular-ui-bootstrap. Therefore a pure jQuery approach may not be feasible.

3. MY GOAL

I provide you with a code snippet that doesn't use ng-repeat at all. My goal is to use ng-repeat applied to each element of my collection.

http://jsfiddle.net/RkCMr/1/

Answer 1

It is also possible to do it with ng-repeat-start and ng-repeat-end directives:

<table>
  <tr ng-repeat-start="item in items">
    <td>first</td>
    <td>row</td>
  </tr>
  <tr ng-repeat-end>
    <td>second</td>
    <td>row</td>
  </tr>
</table>

In my opinion it is much better than repeating tbody element.