How to insert HTML into view from AngularJS controller? Last Updated : 19 Feb, 2020 Comments Improve Suggest changes Like Article Like Report 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: html <!DOCTYPE html> <html ng-app="myApp"> <head> <title>ng-bind-html Directive</title> <script src= "//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"> </script> <script src= "//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-sanitize.min.js"> </script> <style> .green { color: green; font-size: 20px; } </style> </head> <body ng-controller="geek" style="text-align:center"> <h1 style="color:green;">GeeksforGeeks</h1> <h2 style="">ng-bind-html Directive</h2> <p ng-bind-html="text"></p> <script> var myApp = angular.module("myApp", ['ngSanitize']); myApp.controller("geek", ["$scope", function($scope) { $scope.text = "<span class='green'> GeeksforGeeks</span> is the" + " computer science portal for geeks."; }]); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to insert HTML into view from AngularJS controller? P priyanshid1 Follow Improve Article Tags : Technical Scripter Web Technologies AngularJS Technical Scripter 2019 AngularJS-Misc +1 More Similar Reads How to use filter within controllers in AngularJS ? In this article, we will see how to use the Filter inside the controller using AngularJS. Filters are used to format the value of an expression and display it to the user. It can be used in HTML Previews, Controllers or Services, and directives. AngularJS facilitates many built-in filters, although, 4 min read How to create nested controllers in Angular.js ? A controller in AngularJS is a JavaScript object created with the help of a JavaScript object constructor. A controller can contain properties and functions. Controllers are used for controlling the application data of an AngularJS application. In this article, we will see the nested controllers in 4 min read How to call an AngularJS Function inside HTML ? A Function is a set of statements that takes input, does some specific computation, and produces output. In this article, we will learn How to Call an AngularJS function inside HTML. To achieve this, we can use {{...}} to call the function from HTML. We can also pass arguments and return the result 3 min read How to Remove HTML element from DOM using AngularJS ? In this article, we will see how to remove particular HTML elements from the DOM with the help of AngularJS, along with understanding its implementation through the examples. For this, we can use the remove() method that helps to remove all the selected elements including all the text. Syntax: selec 2 min read How to display variable from .ts file to .html file in angular 17 In Angular, when you're working on a component, you use TypeScript files (.ts) to write the code that controls how the component behaves. On the other hand, HTML files (.html) handle how the user interface looks and gets displayed. Table of Content Data BindingSteps to Create Angular ApplicationInte 3 min read AngularJS $controller Service AngularJS applications depend on a controller to control the flow of data through an AngularJS application. AngularJS architecture uses the MVC model i.e the Model View Controller. The model is responsible for maintaining the application data, the View for displaying data or some part of data to the 5 min read How to use AngularJS to Display HTML content value ? The ng-bind-html Directive is used to bind the innerHTML of an HTML element to application data and remove dangerous code from the HTML string. The $sanitize service is a must for the ng-bind-html directive. It is supported by all HTML elements. Syntax: <element ng-bind-html="expression"> Cont 2 min read How to execute AngularJS controller function on page load ? In this article, we will see how to execute/call a JS function on page load using AngularJS. This function can be used to perform initialization. Calling a function or initializing a single value on page load in AngularJS is quite easy. AngularJS provides us with a dedicated directive for this speci 2 min read AngularJS ng-controller Directive The ng-controller Directive in AngularJS is used to add a controller to the application. It can be used to add methods, functions, and variables that can be called on some event like click, etc to perform certain actions. Syntax: <element ng-controller="expression"> Contents... </element 2 min read How to concat strings using AngularJS ? In this article, we will see how to concat strings in AngularJS. There are few ways to concat the strings in AngularJS. In this article, we will see 2 of them.Example 1: In the first example, we are using the '+' operator to concat the strings HTML<!DOCTYPE HTML> <html> <head> < 2 min read Like