bind property in dom's style attribute angular js

Question

I have problem with IE only when I try to render a property into style attribute.

Html:

<span style="background-color: {{ color }}">{{ color }}</span>

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.color = '#00ffff'
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <span style="background:{{color}}">Hello, {{name}}!</span>
  </div>
</div>

fiddle

If your solution will be using ngStyle I will be glad to example of code that use the variable $scope.color. That's mean that when the $scope.color will be change I want that the background will change too.

Answer 1

You can use ngStyle directive:

<span ng-style="{'background-color': color}">Hello, {{name}}!</span>

Where color is your $scope.color