The Issue
I believe the issue you're running into here is something called "Strict Contextual Escaping". Basically, to prevent Evil Horrible People™ from running malicious code on your site thru stuff like the following:
<div id='my-div'>
<!--Also please don't use IDs that are stupid as this one, kthx-->
<input id='html-inp' ng-model='someInput'>
<div class='result'>{{someInput}}</div>
OR...
<div class='result' ng-bind-html='someInput'></div>
</div>
If you ran this code inside a normal, otherwise-perfectly-functional AngularJS app, you could put whatever you want in #html-inp, and assume that it'd show up in both of those .result divs. However... If you type any HTML in there - for example, "<i>This text is supposed to be italic!</i>", it'll show the exact the code you've typed in, not the "rendered" version that you want it to.
ng-bind-html-unsafe
To avoid this, one way used to be using the ng-bind-html-unsafe directive, as the linked question above suggests. However, that's been removed, so depending on what sub-version of AngularJS you're using, that's not likely to work.
$sce
Instead, you now need to use the Strict Contextual Escaping module (someone else please correct this if it's not actually called a "module". Is it a service?), $sce:
var myApp = angular.module('myAwesomeApp',[]).controller('myController',function($scope,$sce,someOtherModule){
...the rest of your code.
That will allow you to do stuff like this:
//we're inside an angularjs controller here
$scope.someRenderedHTML = $sce.trustAsHtml($scope.someVarWithRawHtml);
If you wanna use this in your HTML, you could do it like:
<div class='result' ng-bind-html='someRenderedHTML'></div>
Alternatively, you could create a filter:
.filter('trustMe', ['$sce', function($sce){
return function(text) {
return $sce.trustAsHtml(text);
}
}])
And just do <div class='result' ng-bind-html='someVarWithRawHtml|trustMe'></div>
