internet explorer - AngularJs directive's template not updating in IE9 -

i'm creating angularjs's directive. in internet explorer (ie9) doesn't work expected. replace original html template, doesn't update template's interpolated strings.

it works correctly in chrome, firefox , safari

here's code

angular.module('app', []); angular.module('app').directive('mydirective', function () {     return {         replace: true,         scope: {             height: '@',             width: '@'         },         template: '<div style="width:{{width}}px;height:{{height}}px;' +             'border: 1px solid;background:red"></div>'     }; }); 

and here html calling directive

<div id="ng-app" ng-app="app">     <div mydirective width="100" height="100"></div> </div> 

here's fiddle http://jsfiddle.net/sap7t/

you're going need use ng-style. means having setup javascript object styles in it. see comments on page more info. so, this:

angular.module('app').directive('mydirective', function () {     return {         replace: true,         scope: {             height: '@',             width: '@'         },         template: '<div ng-style="getmystyle()"></div>',         link: function(scope, element, attrs) {             scope.getmystyle = function () {                 return {                     width: scope.width + 'px',                     height: scope.height + 'px',                     border: '1px solid',                     background: 'red'                 };             }         }     }; }); 

updated fiddle