Equal spacing div's in a container

Here is my example: http://jsfiddle.net/rtCP3/62/

I have 3 (or more!) div's I want to space equally in one container. When using angular with ng-repeat the styles are not being picked up. When I hardcode the exact same elements it works just fine.

Angular output:

<div class="container ng-scope" ng-controller="ParentCtrl">
     <!-- ngRepeat: item in list -->
     <div class="box ng-scope ng-binding" data-ng-repeat="item in list">item1</div>
     <div class="box ng-scope ng-binding" data-ng-repeat="item in list">item2</div>
     <div class="box ng-scope ng-binding" data-ng-repeat="item in list">item3</div>
     <div class="box ng-scope ng-binding" data-ng-repeat="item in list">item4</div>
     <span class="stretch"></span>
</div>

Hardcoded:

<div class="container">
    <div class="box">Item 1</div>
    <div class="box">Item 2</div>
    <div class="box">Item 3</div>
    <div class="box">Item 4</div>
    <span class="stretch"></span>
</div>

I based this on this stackoverflow question: Fluid width with equally spaced DIVs

This works. I'm not sure why, but it spaces it the same:

 <div class="container" ng-controller="ParentCtrl">
     <span data-ng-repeat="item in list">
         <div class="box">{{ item.name }}</div>
     </span>
     <span class="stretch"></span>
 </div>

Maybe someone else can explain why that works, but in your fiddle repeating on the span element but with the box class inside made both implementations look the same.

A comment in the SO question you reference says

It took me 3h to find that you should have spaces between each boxes in the html. 'Justify' extends spaces between the elements and if your content is <div/><div/><div/> it does not work. You need to have <div/> <div/> <div/>.

I believe ng-repeat doesn't put any spaces between its output, so all the divs are right up against each other, causing the problem.

You could create your own ng-repeat-like directive that would add a space.