Problems using angular ng-style, not updating in IE

Question

I've created a simple directive in Angular which generates a scroller to display some products.

I'm having an issue with one part of the code.

            <ul ng-style="{'margin-left':{{currentMargin}}+'px'}">
                <li ng-repeat="tyre in tyres" ng-style="{'width':{{liWidth}}+'px'}">
                    <div class="imageContainer"><img src="../Images/eutl/{{tyre.image}}"/></div>
                    <div class="details">
                        <h3>{{tyre.name}}</h3>
                        <a href="{{tyre.link}}">About this tire</a>
                    </div>
                </li>
            </ul>

and this is what it looks like in the browser once executed
<ul ng-style="{'margin-left':0+'px'}">
<!-- ngRepeat: tyre in tyres -->
<li ng-repeat="tyre in tyres" ng-style="{'width':265+'px'}" class="ng-scope" style="width: 265px;">
    <div class="imageContainer"><img src="../Images/eutl/tire.jpg"></div>
    <div class="details">
        <h3 class="ng-binding">Fuel Efficient</h3>
        <a href="#">About this tire</a>
    </div>
</li>
<!-- end ngRepeat: tyre in tyres --></ul>

after executing this on my page I get the scroller and the ng-style inside the "li" elements gets displayed correctly, while the ng-style for the "ul" doesn't.

I've tried multiple solutions, even trying to add the same exact ng-style from the "li" element and it just doesn't get processed and no style is added.

Can anyone help me by pointing out a mistake in my markup or a possible cause for one ng-style working on the Li elements and the other not working on the UL itself?

The other problem I'm having is that the value of the currentMargin is not updating in IE8/9 and so on.

Thanks

Answer 1

ng-style accepts an Angular expression that evaluates to an object. This means that if you want to use a variable inside that expression, you can use it directly (without the double-curlies):

ng-style="{width: liWidth + 'px'}"

Double-curlies are used when you want to insert a dynamic, interpolated value to an argument that accepts a string, like <img alt="{{product.name}} logo">. You then put an expression inside those brackets.

Answer 2

Try to do :

ng-style="{'width':liWidth+'px'}">

No curly bracket, a lot of ng directive don't like it