IE11 issue: styles used as angularJS variable doesn't render

Question

HTML

<div ng-app="myApp" ng-controller="myCtrl" style="background:{{hex}}">
        Background-color: {{hex}}
</div>

Javascript

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.hex= "#ff0000";
});

Here's the jsFiddle http://jsfiddle.net/2qLwoydd/

When I try to use variable as style, it works in Chrome and FF, but the background color (in the example mentioned above) doesn't apply in IE11. Appreciate your help.

Answer 1

Use ng-style instead of style attribute with {{}}

Markup

<div ng-app="myApp" ng-controller="myCtrl" ng-style="{'background-color':hex}">
    Background-color: {{hex}}
</div>

Working Fiddle