javascript - Angularjs ng-repeat and child elements -

i'm attempting insert <br/> every nth element achieve (using ng-repeat , ng-if="!($index % 2)"):

<div class="container">     <div>         <span>1</span>         <span>2</span>         <br/>         <span>3</span>     </div> </div> 

i thought mimic how i've used ng-repeat in past <ul/> elements, so:

<div class="container">     <ul ng-repeat="item in list">         <li>{{item}}</li>     </ul> </div> 

which produces list such this:

<div class="container">     <ul>         <li>1</li>         <li>2</li>         <li>3</li>     </ul> </div> 

yet when attempt this:

<div class="container">     <div ng-repeat="item in list">         <span>{{item}}</span>     </div> </div> 

i differing result <ul/> usecase:

<div class="container">     <div>         <span>1</span>     </div>     <div>         <span>2</span>     </div>     <div>         <span>3</span>     </div> </div> 

the question two-fold:

• why ng-repeat directive on <ul/> behave differently
• how can have multiple span elements break without wrapping each span in div?

https://docs.angularjs.org/api/ng/directive/ngrepeat

the ngrepeat directive instantiates template once per item collection. each template instance gets own scope, given loop variable set current collection item, , $index set item index or key.

in loop, 'item' has following local variables: $index, $first, $middle, $last, $even, $odd. each except $index returns boolean value tells if item is, example, $odd. take @ directive ngclasseven.