Manipulating inline style with angular does not work in IE

Question

I wanted to set the position of a div based on the return value of a function in an angular controller

The following works fine in FireFox and in chrome but in Inter

Answer 1

If you want to use angular binding expression {{}} just like normal style attribute like style="width:{{someScopeVar}}", use ng-attr-style and it will work perfectly IE (and obviously other smarter ones) :)

check my jsFiddle ... Checked with Angular JS 1.4.8

here I have shown the usage of style, ng-style and ng-attr-style

THE HTML

    


        

            This will NOT get colored in IE
        

        

            But this WILL get colored in IE
        

        

            And so is this... as this uses a json object and gives that to ng-style
        

    

THE JS

var app = angular.module('app', []);

app.controller('controller', function($scope) {

    $scope.bgColor = "yellow";        
    $scope.styleObject = {"background": "yellow"};
});