AngularJS: Display part of an expression in bold

Question

My aim is to make part of an angular expression bold.

So basically I'm taking an object obj, and converting it to a string str.

obj = $scope.gridOptions1.api.getFilterModel();
     for (var propt in obj) {
         str += (" " + propt + ': ' + obj[propt]);
     }

I then need to find a particular word within that object, for example "Depot". I'm doing this using str.indexOf("Depot"). I set this to a variable d:

for (i = 0; i < str.length; i++) {
             var d = str.indexOf("Depot");
}

I then replace the ORIGINAL "Depot" with a BOLD "Depot":

if (d !== -1 ) {
             var depot = str.substring(d, d + 5);
             finalString = str.replace(depot, depot.bold());
         }

Then I fire my string onto the scope:

$scope.getFiltered = finalString;

the .bold() method is simply returning the string with the bold tags around "Depot" in my UI.

So I'm taking it that the string isn't considered HTML, is there another way to do this?

Answer 1

from this answer

you will need to tell angular to treat the result as html. In order to do this, you need to include ngSanitize as a module dependency and insert the result with ng-bind-html.

So the html will look like

 <p ng-bind-html="htmlString"></p>

and the angular part

angular.module('app', ['ngSanitize'])