title: ng-bind is working fine, Why ng-bind-html is not working
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>   angular.module('form', []).controller('formcontroller', ['$scope',
        function($scope) {
          $scope.input;
          $scope.hello = "&lt;h1&gt; Welcome&lt;/h1&gt;";
        }
      ]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;form ng-app="form" ng-controller="formcontroller"&gt;
      &lt;span ng-bind="hello"&gt;&lt;/span&gt;
      
      &lt;span ng-bind-html="hello"&gt;&lt;/span&gt;
    &lt;/form&gt;
   
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried by using </p>
  
  
         
  
  
  
  <p>It results in the output as </p>
  
  <pre><code>&lt;h1&gt; Welcome&lt;/h1&gt;
  </code></pre>
  
  <p>I tried by replacing ng-bind-html is not woking and throws an error.</p>
  
  <blockquote>
  <pre><code>&lt;script&gt;
        angular.module('form', []).controller('formcontroller', ['$scope', function($scope) {
  
                 $scope.hello="&lt;h1&gt; Welcome&lt;/h1&gt;";
      }]);
      &lt;/script&gt;
  </code></pre>
    
    <p>Error: $sce:unsafe Require a safe/trusted value Attempting to use an
    unsafe value in a safe context.</p>
  </blockquote>
  
  <p>Please explain.</p>