IE 11 won't recognize Angular JS variable

Question

The following code works fine in Chrome, but when viewed in Internet Explorer 11, the background color does not show up:

span.fa.fa-icon-only(style='background-color: #{{vehicle.visual_color}};', rr-tt='{{vehicle.color_name}}')

The visual_color variable is a hex color code, and for some reason it's not being recognized on IE. Does anyone know a way around this?

Answer 1

IE has issues with dynamically changing a style tag as shown in this example http://plnkr.co/edit/lLvvDz?p=preview. Try using ng-style instead. e.g.:

span.fa.fa-icon-only(ng-style="{'background-color': '#' + vehicle.visual_color}", rr-tt='{{vehicle.color_name}}')