Wrap columns in rows using Angular <p><strong>Edited</strong> to include angular code (for illustration purposes only)</p> <p>I've been trying to find away in AngularJS to auto wrap columns in rows after n columns whilst not affecting the index.</p> <pre><code>&lt;div class="row"&gt; {{for (var i = 0; i &lt; list.length; i++ ) { }} &lt;div class="col-4"&gt;list[0].name&lt;/div&gt; {{ } }} </code></pre> <p>This is how it'd be done in PHP below. </p> <p>In short: </p> <pre><code>&lt;div class="row"&gt; &lt;?php $collection = array( 'item1', 'item2', 'item3', 'item4', 'item5', ); for($i = 0; $i &lt; count($collection); $i++ ) : ?&gt; &lt;div class="col-4"&gt; &lt;?php echo $collection[$i] ?&gt; &lt;/div&gt; &lt;?php if(($i + 1) % 3 === 0) :?&gt; &lt;/div&gt; &lt;!-- close row --&gt; &lt;div class="row"&gt;&lt;!-- open new row --&gt; &lt;?php endif ?&gt; &lt;?php endfor ?&gt; &lt;/div&gt; &lt;!-- close final row --&gt; </code></pre> <p>I know it can be done within a controller and pushed back into the DOM within a link function, but that just seems horrible. I'm sure I must be missing something, but conditionally adding the closing div before the opening one is proving tricky for me. </p> <p>P.S. I considered doing the example using Underscore.js, but felt this would be a little more universal. </p>