Rendering a template into a trusted HTML string [AngularJS]

Question

I'm using AngularJS Toaster found here to show ModelState errors from my API. You are able to pass AngularJS Toaster trusted HTML and I'd like to pass it HTML from a rendered template:

<script type="text/ng-template" id="modelStateErrors.html">
    <div>{{response}}</div>
</script>

Here's the code for popping up the toast:

app.service("errorService", ["$templateCache", "toaster", function ($templateCache, toaster) {
    this.catchErrors = function (response) {
        // Pass "response" to the template to render.
        toaster.pop("error", "", $templateCache.get("modelStateErrors.html"), 0, true);
    };
}]);

This code only produces the <div>{{response}}</div> as is, unparsed.

EDIT: So I tried adding:

$compile($templateCache.get("modelStateErrors.html"))(response);

and I get this error message

Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element

Answer 1

Once you retrieve the template from the $tempateCache , you still need to compile it before writing it to the DOM:

AngularJS: $compile