Angular Translate HTML tags

Tested with AngularJS 1.4.7, I just use this:

<span data-ng-bind-html="'my.i18n.code.to.translate.html.tags' | translate"></span>

Since I do not want to inject any filter but above is just worked on my own trusted i18n string. Of course, the accepted answer would be more safe but this one is just work right away.

Angular sanitizes any html strings during its interpolation. In order to get around this you will need to mark the HTML as safe in $sce before injecting. Then also use ngBindHtml to output the html.

I've not used angular-translate before, but this may work:

//app is the main module
app.filter("htmlSafe", ['$sce', function($sce) {
    return function(htmlCode){
        return $sce.trustAsHtml(htmlCode);
    };
}]);

//then to output it
<span data-ng-bind-html="'page.PAGES_WELCOME' | translate | htmlSafe"></span>

You can keep your JSON file as it is, and then simply use the innerHTML attribute in the HTML to render your text like so:

 <div [innerHTML]="'page.PAGES_WELCOME' | translate"></div>