title: Advanced structuring: Surrounding ngRepeated items Angular.js
body: <p>You have an array of objects you're iterating over, 
  How would you surround every (x) elements with (element)?</p>
  
  <h2>If your goal is:</h2>
  
  <h3>to have an (element) surrounding every 4 ng-repeated elements?</h3>
  
  <pre><code>surrounding
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
  /
  surrounding
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
    ng-repeated-elem
  /
  </code></pre>
  
  <h3>to have an (element) surrounding every 2 <em>groups</em> of 4 ng-repeated elements</h3>
  
  <pre><code>complicated
    surrounding
      ng-repeated-elem
      ng-repeated-elem
      ng-repeated-elem
      ng-repeated-elem
    /
    surrounding
      ng-repeated-elem
      ng-repeated-elem
      ng-repeated-elem
      ng-repeated-elem
    /
  /
  complicated
    surrounding
      ng-repeated-elem
      ng-repeated-elem
      ng-repeated-elem
      ng-repeated-elem
    /
    surrounding
      ng-repeated-elem
      ng-repeated-elem
      ng-repeated-elem
      ng-repeated-elem
    /
  /
  </code></pre>
  
  <hr>
  
  <hr>
  
  <h3>Normal usage of ng-repeat:</h3>
  
  <pre><code>&lt;div ng-controller="ExampleContrller as example" &gt;      
    &lt;div ng-repeat="ex in example.arr"&gt;
      &lt;span&gt;{{ex.a}}&lt;/span&gt;
      &lt;span&gt;{{ex.b}}&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h3>would output:</h3>
  
  <pre><code>&lt;div ng-controller="ExampleContrller as example" &gt;      
  
    &lt;div ng-repeat="ex in example.arr"&gt;
      &lt;span&gt;a&lt;/span&gt;
      &lt;span&gt;b&lt;/span&gt;
    &lt;/div&gt;
    &lt;div ng-repeat="ex in example.arr"&gt;
      &lt;span&gt;a&lt;/span&gt;
      &lt;span&gt;b&lt;/span&gt;
    &lt;/div&gt;
    &lt;div ng-repeat="ex in example.arr"&gt;
      &lt;span&gt;a&lt;/span&gt;
      &lt;span&gt;b&lt;/span&gt;
    &lt;/div&gt;
    &lt;div ng-repeat="ex in example.arr"&gt;
      &lt;span&gt;a&lt;/span&gt;
      &lt;span&gt;b&lt;/span&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <h3>how could you get the ng-repeat to output this:</h3>
  
  <pre><code>&lt;div ng-controller="ExampleContrller as example" &gt;      
  
    &lt;section&gt; &lt;!-- get a section to surround every (x) ng-repeated elements --&gt;
  
      &lt;div ng-repeat="ex in example.arr"&gt;
        &lt;span&gt;a&lt;/span&gt;
        &lt;span&gt;b&lt;/span&gt;
      &lt;/div&gt;
      &lt;div ng-repeat="ex in example.arr"&gt;
        &lt;span&gt;a&lt;/span&gt;
        &lt;span&gt;b&lt;/span&gt;
      &lt;/div&gt;
  
    &lt;/section&gt;
  
    &lt;section&gt;
  
      &lt;div ng-repeat="ex in example.arr"&gt;
        &lt;span&gt;a&lt;/span&gt;
        &lt;span&gt;b&lt;/span&gt;
      &lt;/div&gt;
      &lt;div ng-repeat="ex in example.arr"&gt;
        &lt;span&gt;a&lt;/span&gt;
        &lt;span&gt;b&lt;/span&gt;
      &lt;/div&gt;
  
    &lt;/section&gt;
  
  &lt;/div&gt;
  </code></pre>