Compile angularjs code inside IE conditional tags

Date posted: January 14, 2016

I had a problem with Angularjs expressions inside IE conditional tags. The expressions were not compiled because Angular didn’t recognise them as Angular code but as comments.
The code looked almost like this:
<!--[if gte mso 9]>
<v:rect href="{{ expression }}" xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:435px;height:210px;"> <v:fill type="tile" src="{{ expression }}" color="#ebbb7b"/> <v:textbox inset="0,0,0,0"><![endif]-->

A simple solution is to generate the complete IE condition as a string in the controller and bind the sting to the front end using $sce with the $sce.trustAsHtml method.

$scope.trusted_html_text = function(t) { return $sce.trustAsHtml(t); };

$scope.outlook_background_660 = '<!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:660px;height:210px;"><v:fill type="tile" src="'+$scope.selected_hero_image_name+'" color="#ebbb7b"/><v:textbox inset="0,0,0,0"><![endif]--><!--del-->';

<div ng-bind-html="trusted_html_text(outlook_background_660)"></div>
where "outlook_background_660" is the conditional IE string