Angular Recipe: Insert html string from js into html (solve Error: [$sce:unsafe])

Angular JS

## Insert html string from js into html If u'll try to insert the string with html tags as it <div "<p>Some Cool Text</p>"</div> U'll see just a string with it's tags instead of html <p>Some Cool Text</p> To insert it like html u've to use `ng-bind-html` directive @see [Angular API - NgBind](https://docs.angularjs.org/api/ng/directive/ngBindHtml) <div ng-bind-html="'<p>Some Cool Text</p>'"></div> However to avoid security vulnerabilities it's avoided to insert html, so u'll receive the following [error](https://docs.angularjs.org/error/$sce/unsafe): `Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.` ---- ## Get `ng-bind-html` working To resolve this problem you have to use '$sce' @see [Angular API - Strict Contextual Escaping](https://docs.angularjs.org/api/ng/service/$sce) *.html* <div ng-bind-html="getHTMLString()"></div> *.js* $scope.getHTMLString = function(){ return $sce.trustAsHtml("<p>Some Cool Text</p>"); }; Well Done *(output)*: Some Cool Text *Be aware: Generated html string with some ng-directive tags inside (e.g. `ng-src`) won't work if you will try to insert it via `ng-bind-html` :(* ---- ## see Also * [Keynote: AngularJS Routing](http://bloomlab.blogspot.com.ee/2015/09/keynote-angularjs-routing.html) * [Keynote: AngularJS Do the custom things](http://bloomlab.blogspot.com.ee/2015/09/keynote-angularjs-do-custom-things.html) * [Keynote: AngularJS Do the regular things](http://bloomlab.blogspot.com.ee/2015/09/keynote-angularjs-do-regular-things.html) * [Keynote: AngularJS Basics](http://bloomlab.blogspot.com.ee/2015/09/keynote-angularjs-basic-short-notes.html) * [Bootstrap Components](http://getbootstrap.com/components) * [AngularJS - API](https://docs.angularjs.org/api/ng) * [AngularJS - httpBackend](https://docs.angularjs.org/api/ngMockE2E/service/$httpBackend) * [AngularJS - Developer Documentation](https://docs.angularjs.org/guide) * [AngularJS - ShapingUP course slides](http://courseware.codeschool.com/shaping-up-with-angular-js/Slides/level01-05.pdf) * [AngularJS - StayingSharp course slides](http://courseware.codeschool.com/staying-sharp-with-angular-js/angular2-full-small.pdf) * [AngularJS - Receipes with Angular](http://fdietz.github.io/recipes-with-angular-js/) * [AngularJS - Receipes github](https://github.com/fdietz/recipes-with-angular-js-examples) * [AngularJs - Select Options](https://docs.angularjs.org/api/ng/directive/select) * [Tutorials Point - AngularJS](http://www.tutorialspoint.com/angularjs/angularjs_directives.htm) * [Tutorials Point - BestPractices](http://www.tutorialspoint.com/developers_best_practices/index.htm) * [Keynote: Top JS frmeworks 2015](http://bloomlab.blogspot.com.ee/2015/03/top-javascript-frameworks-2015.html)