Display HTML in AngularJS - angularjs

Question

I have a angular coding what need insert html tags, I found out I can use ngSanitize :https://docs.angularjs.org/api/ngSanitize , but I don't whant load another library in that project.
I tried this: AngularJS : Render HTML in $scope variable in view
but I could not make work.
It's any way to do this without load another angular library?
html:
<div ng-controller="MyCtrl">
<ul class="procedures">
<li ng-repeat="procedure in procedures">
<h4>{{procedure.icon}}</h4>
<div class="procedure-details" ng-show="show">
<p>text here: {{procedure.text}}</p>
<p>your number is: {{procedure.number}}</p>
<p>price you will pay: {{procedure.price}}</p>
</div>
</li>
</ul>
</div>
js:
var myApp = angular.module('myApp', []);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.procedures = [{
icon: '<i class="fa fa-american-sign-language-interpreting" aria-hidden="true"></i>',
text: 'test text',
number: 1,
price: 10000
}];
}
jsfiddle:
http://jsfiddle.net/wD7gR/247/

Answer 1

Starting from version 1.2.0, angular contains $sce service, that can be used to mark html as "safe"
UPDATED JSFIDDLE
angular
.module('myApp',[])
.controller('MyCtrl', function($scope, $sce) {
$scope.procedures = [
{
icon: $sce.trustAsHtml('<i class="fa fa-american-sign-language-interpreting" aria-hidden="true">i am icon</i>'),
text: 'test text',
number: 1,
price: 10000
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<ul class="procedures">
<li ng-repeat="procedure in procedures">
<h4></h4>
<div class="procedure-details" ng-show="show">
<p>text here: {{procedure.text}}</p>
<p>your number is: {{procedure.number}}</p>
<p>price you will pay: {{procedure.price}}</p>
</div>
</li>
</ul>
</div>
</div>

Answer 2

Instead of using ngSanitize you can use $sce az filter like this:
Put this code in app.js :
app.filter('sce', ['$sce', function ($sce) {
return $sce.trustAsHtml;
}]);
Then use in Html like this:
<h4></h4>

Answer 3

I can tell u that u can do like below It should be as following
$scope.html = "<i class='fa fa-american-sign-language-interpreting' aria-hidden='true'></i>";
and
<div ng-bind-html-unsafe="html"></div>
You can do the same for for icon, text or whatever u like... I'm not sure how to do that right now cuz I'm typing this from mobile fone, i hope u will get the idea, if not plz leave comment and i'll write a full function once i get my hands on machine.

Answer 4

You can use angular-sanitize to insert HTML in a view.
Example is given in plnkr
app.filter("trust", ['$sce', function($sce) {return function(htmlCode){
return $sce.trustAsHtml(htmlCode); }}]);