AngularJs Return HTML from Controller

Question

I try to return some HTML code from my AngularJs controller to the html data.

This is path of my html :

<div align="right">
   {{chooseHtmlElement()}}">
</div>

And this is path of my AngularJs Controller:

   $scope.chooseHtmlElement= function () {
        var sum = $scope.chiQuadSum();
        if (isNaN(sum)) {
            return "";
        }
        if (sum > 17.00) {
            return "<i class=\"fa fa-minus-circle\" style=\"color:red;\"></i>";
        } else if (sum < 14.00) {
            return "<i class=\"fa fa-check-circle\" style=\"color:green;\"></i>";
        } else {
            return "<i class=\"fa fa-circle\" style=\"color:orange;\"></i>";
        }
    }

The problem is when I return these string, the element is not shown as html element, but as text which you can read. Is there any possibility returning these string as html element?

Answer 1

While binding html on view in angular js you need to use ng-bind-html directive. But before binding html, you need to sanitize that html by using $sce.trustAsHtml method of ngSanitize module.

<div align="right" ng-bind-html="chooseHtmlElement() | trustedhtml"></div>

Filter

app.filter('trustedhtml', 
   function($sce) { 
      return $sce.trustAsHtml; 
   }
);

Answer 2

you can use

ngSanitize

There are 2 steps:

1. include the angular-sanitize.min.js resource, i.e.:
   <script src="lib/angular/angular-sanitize.min.js"></script>

2. In a js file (controller or usually app.js), include ngSanitize, i.e.:
   angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

$refrence