Difference between ng-bing and ng-bind-html

app = angular.module('app', ['ngSanitize']);

app.controller('Ctrl', function($scope) {
  $scope.text = "Hello";
  $scope.html = 'I am an <code>HTML</code> string with <a href="#">links!</a> and other <em>stuff</em>';
});

/* 


ng-bind
ngBind is used to replace the text content of the specified HTML element with 
the value of a given expression. For example if you have an html as follows 
<b ng-bind="name"></b> and in your controller give a value for name as $scope.name = "John". 
This will result in <b>John</b>. But you can't use multiple values to bind in 
a single html element. For example

$scope.first_name = "John";
$scope.second_name = "D";
<b ng-bind="first_name second_name"></b> 
This will not give the result as <b>John D</b> only bind first_name. 
So for binding multiple values we can use ng-bind-template

ng-bind-template
 $scope.first_name = "John";
 $scope.second_name = "D";

<b ng-bind-template="first_name second_name"></b>
This results in <b>John D</b> But you can't render an html tag in this both. 
For rendering html template we can use ng-bind-html.

ng-bind-html
$scope.name = "<b>John</b>";
<div ng-bind-html="name"></div>
This will result in John instead of showing <b>John</b> . 
That means it renders the html instead of showing html tag.











*/

<!doctype html>
<html ng-app="app">
  <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.0/angular-sanitize.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
  <body ng-controller="Ctrl">
  
    <div ng-bind-html="html"></div>
    <hr />
    <div ng-bind="html"></div>
  
  </body>
</html>