AngularJs ng-repeat expressions not working in IE9

Question

I need to add tick marks below a ui-slider so that it looks somewhat like this:

Automated interpolation with ng-repeat doesn't work:

In my controller I have a limits array

$scope.limits = [ 1, 3, 5, 10, 15 ];

I reference limits in my html:

<p ng-repeat="l in limits" 
   style="left:{{$index*100/(limits.length-1)}}%"
   class="slider-tick">
    <span class="slider-tick-mark">|</span>
    <br>
    {{l}}
</p>

In Chrome this works fine, but not in IE9 - all the tick marks and numbers are bunched up on the left-hand side

Chrome:

IE9:

It's as if the style expression is not working ("left:{{$index*100/(limits.length-1)}}%")

Manual interpolation works:

If I code the repeated elements by hand, then it works as expected in IE9.

<p class="slider-tick" style="left:0%"  ><span class="slider-tick-mark">|</span><br/>1</p>
<p class="slider-tick" style="left:25%" ><span class="slider-tick-mark">|</span><br/>3</p>
<p class="slider-tick" style="left:50%" ><span class="slider-tick-mark">|</span><br/>5</p>
<p class="slider-tick" style="left:75%" ><span class="slider-tick-mark">|</span><br/>10</p>
<p class="slider-tick" style="left:100%"><span class="slider-tick-mark">|</span><br/>15</p>

Question:

Is there any way to have the ng-repeat expression work in IE9?

Update:

After using the Developer Tools to inspect the DOM, I see there is no style tag on the <p> element at all.

IE9:

In Chrome's developer tools, that style tag does exist:

Chrome:

Answer 1

Use the ng-style directive instead of the style attribute. The browser is trying to interpret your Angular expression as (invalid) CSS; ng-style will make Angular evaluate the value and then apply it as the style attribute.

<p ng-repeat="l in limits" 
   ng-style="{left: ($index*100/(limits.length-1)) + '%'}"
   class="slider-tick">
    <span class="slider-tick-mark">|</span>
    <br>
    {{l}}
</p>