angularjs - Angular JS Directive not rendering inline style in IE9 -

i have directive working fine in chrome, in ie9 renders '{{myappinitials.iconcolor}' html:

<tr ng-repeat="person in data.people">     <td class="text-left">        <div myapp-initials="person" ></div>     </td> </tr> 

the directive:

angular.module('myapp.directives', [])     .directive('myappinitials', function () {        return {           restrict: 'a',           template: "<div style='background-color:{{myappinitials.iconcolor}}' class='usericonmedium'>{{myappinitials.firstname.charat(0) + ' ' + myappinitials.surname.charat(0)}}</div>",           scope: {              myappinitials: "="           }   }; }); 

there plunker here check.

is angular bug?

ie (including 11) not support interpolation in style attributes. must use ngstyle that, e.g ng-style="{'background-color': myappinitials.iconcolor}"

https://docs.angularjs.org/guide/ie

this working solution, though i'd prefer include ng-style element within template of directive not yet sure whether possible:

<tr ng-repeat="person in data.people">     <td class="text-left">        <div ng-style="{'background-color':person.iconcolor}" class="usericonmedium" myapp-initials="person"></div>     </td> </tr> 

the directive:

angular.module('myapp.directives', [])     .directive('myappinitials', function () {        return {           restrict: 'a',           template: "{{myappinitials.firstname.charat(0) + ' ' + myappinitials.surname.charat(0)}}",           scope: {              myappinitials: "="           } };  });