title: Angularjs ng-repeat and child elements
body: <p>I'm attempting to insert a <code>&lt;br/&gt;</code> every nth element to achieve something like this (using ng-repeat and ng-if="!($index % 2)"):</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div&gt;
          &lt;span&gt;1&lt;/span&gt;
          &lt;span&gt;2&lt;/span&gt;
          &lt;br/&gt;
          &lt;span&gt;3&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I thought I could mimic how i've used ng-repeat in the past for <code>&lt;ul/&gt;</code> elements, as so:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;ul ng-repeat="item in list"&gt;
          &lt;li&gt;{{item}}&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>which produces a list such as this:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;ul&gt;
          &lt;li&gt;1&lt;/li&gt;
          &lt;li&gt;2&lt;/li&gt;
          &lt;li&gt;3&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Yet when I attempt to do something like this:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div ng-repeat="item in list"&gt;
          &lt;span&gt;{{item}}&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I get this differing result from the <code>&lt;ul/&gt;</code> usecase:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div&gt;
          &lt;span&gt;1&lt;/span&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;span&gt;2&lt;/span&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;span&gt;3&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The question is two-fold:</p>
  
  <ul>
  <li>Why does the ng-repeat directive on a <code>&lt;ul/&gt;</code> behave differently</li>
  <li>How can I have multiple span elements then a break without wrapping each span in a div?</li>
  </ul>