In this article I will explain with example, how to use the AngularJS ng-bind-html directive to display HTML content in AngularJS using ng-bind-html.
 
 
Display HTML in AngularJS using ng-bind-html
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
The ng-controller uses $sce (Strict Contextual Escaping) service which is used to mark the HTML as trusted using the trustAsHtml method.
Note: Unless the HTML content is trusted using the $sce service, it will not be displayed using ng-bind-html directive.
The AngularJS app HTML DIV consists of an HTML SPAN specified with ng-bind-html directive, which will be used to display HTML content.
<html>
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $sce) {
            $scope.Message = $sce.trustAsHtml("My name is <span style = 'color:red'><b>Mudassar Khan</b></span>");
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
       <span ng-bind-html = "Message"></span>
    </div>
</body>
</html>
 
 
Screenshot
AngularJS ng-bind-html example: Display HTML in AngularJS using ng-bind-html
 
 
Demo
View Demo
 
 
Downloads
Download Code