How to convert/escape HTML in Angular?

Question

^ Above is what term.search_preview renders in my templates.

Current HTML:

<div class="term-context-preview" value="{{term.term}}">
     <p ng-bind-html="term.search_preview">
         {{term.search_preview}}
     </p>
</div>

I have '$sce' injected into my controller:

.controller('TermsCtrl',
           ['$scope',
            '$sce',
            'TermsFactory',
            function($scope,
                     $sce,
                     TermsFactory) {

//vm.terms = is the terms array of objects that gets repeated in my widgets
vm.terms = TermsFactory.getTermsModel();

This is where term.search_preview comes from, vm.terms is an array of hundreds of objects. An example of one of the objects:

0: {
    id: 1,
    term: 'term',
    search_preview: 'dsjfdsjkl dsfjdsk fjdksf dksj fdksj '
}

Tried this:

// Build terms widgets with ng-repeat:
vm.terms = $sce.getTrustedHtml(TermsFactory.getTermsModel());
console.log(vm.terms);

Error I'm getting:
Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.

Answer 1

Inside of my termsFactory (where I process and save data objects from a JSON GET call)

I looped through them and used $sce there to created strings that were trustAsHTML

TermsController:

// Set terms into data model:
TermsFactory.setTermsModel(data.data.ticker_tags);

// Build tag widgets with ng-repeat:
vm.terms      = TermsFactory.getTermsModel();
vm.totalTerms = vm.terms.length;

console.log(vm.terms);

TermsFactory: (This is used to iterate through an object, turn items into strings and feed back into the object to be returned)

// Set data to terms:
var setTermsModel = function(data) {

    for (var i = data.length - 1; i >= 0; i--) {
        data[i].search_preview = $sce.trustAsHtml(data[i].search_preview);
    };

    terms = data;
    return terms;
};

Then in the HTML files, fixed the output using ng-bind-html:

<p ng-bind-html="term.search_preview">{{term.search_preview | filter:term.search_preview : limitTo : 200}}</p>

<section ng-show="context" ng-bind-html="context" class="term-context">
    <p>{{context}}</p>
</section>