title: angularJS - Repeating tr's in a table, but dynamically adding more rows while looping
body: <p>Since examples always tell more then just words here is what I would like to do in another language</p>
  
  <pre><code>&lt;tr&gt;
      &lt;c:forEach items="${items}" var="item"&gt; 
        &lt;td&gt;...&lt;/td&gt;
        &lt;td&gt;...&lt;/td&gt;
        &lt;td&gt;...&lt;/td&gt;
        &lt;c:if test="${item.showWarning}"&gt;
           &lt;/tr&gt;&lt;tr&gt;&lt;td colspan="3"&gt;${item.warning}&lt;/td&gt;
        &lt;/c:if&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>So this will loop over a set of items and show some properties of these items. If there is a warning, a new row will be added underneath the current row in which the warning will be shown. However, how can I do this in angularJs? If I put a ng-repeat on the tr, it will stop at the first end tag of tr. I have read on some other threads that this is not very easily done, but how can it be done? And yes, I really do want to use a table. Here is my contrived example with angularjs which is obviously not working as I would like it to. Any pointers how this can be done? </p>
  
  <p><a href="http://jsbin.com/owefez/3/edit" rel="noreferrer">JSBin example with tr-ng-repeat</a></p>