title: angular.js conditional markup in ng-repeat
body: <p>I'm using angular.js and (for the sake of argument) bootstrap. Now I need to iterate on "things" and display them in ''rows'' :</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="span4"&gt;...&lt;/div&gt;
    &lt;div class="span4"&gt;...&lt;/div&gt;
    &lt;div class="span4"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    etc...
  </code></pre>
  
  <p>Now, how can I close my <code>.row</code> div on every third thing with angular? I tried ui-if from angular-ui but even that doesn't make it.</p>
  
  <p>If I were to use server-side rendering, I would do something like this (JSP syntax here, but does not matter) :</p>
  
  <pre><code>&lt;div class="row&gt;
    &lt;c:forEach items="${things}" var="thing" varStatus="i"&gt;
      &lt;div class="span4"&gt;
          ..
      &lt;/div&gt;
    &lt;%-- Here is the trick:--%&gt;
    &lt;c:if test="${i.index % 3 == 2}"&gt;
            &lt;/div&gt;&lt;div class="row"&gt;
    &lt;/c:if&gt;
    &lt;/c:forEach&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Note that I need to actually alter the DOM here, not just css-hiding elements. I tried with the repeat on the <code>.row</code> and <code>.span4</code> divs, with no avail.</p>