How to insert HTML into view from AngularJS controller?

Last Updated : 19 Feb, 2020

The ng-bind-html directive is a secure way of binding content to an HTML element. So in order to insert HTML into view, we use the respective directive. While using AngularJS, write HTML in our corresponding application, we should check the HTML for dangerous or error prone code. By including the "angular-sanitize.js" module in the application we can do so by running the HTML code through the ngSanitize function. Syntax:

<element ng-bind-html="expression"></element>

ngSanitize: It constitutes of 2 steps:

Include the angular-sanitize.min.js resource,

html

   <script src="lib/angular/angular-sanitize.min.js"></script>

In a js file (controller or usually app.js), we must include ngSanitize,

html

   angular.module('myApp', ['myApp.filters', 'myApp.services', 
   'myApp.directives', 'ngSanitize'])

Parameters:

Expressions: Specifies an expression or the value for the evaluation.

Example 1:

html

<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
  </script>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js">
  </script>

<body>

    <div ng-app="myApp" 
         ng-controller="myCtrl">

        <p ng-bind-html="myText">
      </p>

    </div>

    <script>
        var app = angular.module("myApp", ['ngSanitize']);
        app.controller("myCtrl", function($scope) {
            $scope.myText = "GeeksForGeeks: <h1>Hello!</h1>";
        });
    </script>

    <p><b>Note:</b> This example includes the "angular-sanitize.js",
      which has functions for removing potentially 
      dangerous tokens from the HTML.</p>

</body>

</html>

Output:

Example 2: