Insert something between elements generated with ng-repeat - angularjs

Question

What would be the best way, to append an element in between elements generated using ng-repeat?
For example:
<div class="block" ng-repeat="position in [1,2,3,4,5,6,7,8,9,10]">{{position+1}}</div>
I would like to put a <br> after every 4th element. My guess would be to create a directive with the link.post. Tell me if I'm on the good track.
Thank you
jsFiddle: http://jsfiddle.net/uPMZU/

Answer 1

I'm not entirely sure what you're trying to achieve with the <br> but if your are trying to stack them in groups of four then you can do something using the $index variable from ng-repeat and a class change.
JSFiddle with this: http://jsfiddle.net/y44Cb/13/
HTML
<div ng-class="{block: ($index +1) % 4}" ng-repeat="position in [1,2,3,4,5,6,7,8,9,10]">
<div class="red-block">{{position+1}}</div>
</div>
CSS
div.red-block {
display: inline-block;
border: 1px solid red;
width: 50px;
height: 50px;
}
div.block {
float: left;
}

Answer 2

You could use ng-repeat-start and ng-repeat-end and then check whether you want to render the break in a function.
<div class="block" ng-repeat-start="position in [1,2,3,4,5,6,7,8,9,10]">
<div class="red-block">{{position+1}}</div>
</div>
with
<br ng-if="includeBreak(position)" ng-repeat-end>
or
<p ng-if="includeBreak(position)" ng-repeat-end></p>

Answer 3

You can use an ng-switch to do what you need
<div class="block" ng-repeat="position in [1,2,3,4,5,6,7,8,9,10]" data-ng-switch on="($index + 1) % 4 == 0 && $index > 0">
{{position+1}}
<br data-ng-switch-when="true">
</div>
jsfiddle: http://jsfiddle.net/7qrne/ if you inspect the "5" div you'll see it has the same with the "9" div, but none of the others.