title: Angular ng-repeat add bootstrap row every 3 or 4 cols
body: <p>I'm looking for the right pattern to inject a bootstrap row class every each 3 columns. I need this because cols doesn't have a fixed hight (and I don't want to fix one), so it breaks my design ! </p>
  
  <p>Here is my code :</p>
  
  <pre><code>&lt;div ng-repeat="product in products"&gt;
      &lt;div ng-if="$index % 3 == 0" class="row"&gt;
          &lt;div class="col-sm-4" &gt;
              ...
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But it does only display one product in each row. What I want as final result is :</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-sm4"&gt; ... &lt;/div&gt;
      &lt;div class="col-sm4"&gt; ... &lt;/div&gt;
      &lt;div class="col-sm4"&gt; ... &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-sm4"&gt; ... &lt;/div&gt;
      &lt;div class="col-sm4"&gt; ... &lt;/div&gt;
      &lt;div class="col-sm4"&gt; ... &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Can I achieve this with only ng-repeat pattern (without directive or controller) ? The <a href="https://docs.angularjs.org/api/ng/directive/ngRepeat">docs</a> introduce ng-repeat-start and ng-repeat-end but I can't figure out how to use it is this use case ! I feel like this is something we often use in bootstrap templating ! ? Thanks</p>