title: ng-bind-html or ngSanitize not working
body: <p>I am trying to display some data from a JSON query, including a string of HTML content in my AngularJS app (using Angular 1.2.15, Angular-Sanitize 1.2.16, Yeoman 1.0). I've tried everything I can find to get ng-bind-html to work, but it always prints the HTML tags with the content. </p>
  
  <p>Here's an example of a string my JSON query gives me:</p>
  
  <pre><code>&amp;lt;!-- SC_OFF --&amp;gt;&amp;lt;div class="md"&amp;gt;&amp;lt;p&amp;gt;Can be drugs, but also things like TV, games, sex, etc&amp;lt;/p&amp;gt; &amp;lt;/div&amp;gt;&amp;lt;!-- SC_ON --&amp;gt; 
  </code></pre>
  
  <p>Here's what ng-bind-html prints:</p>
  
  <pre><code>&lt;!-- SC_OFF --&gt;&lt;div class="md"&gt;&lt;p&gt;Can be drugs, but also things like TV, games, sex, etc&lt;/p&gt; &lt;/div&gt;&lt;!-- SC_ON --&gt;
  </code></pre>
  
  <p>Interestingly, if I copy the string that ng-bind-html outputs, save it as a string, and run it through $sce.trustAsHtml() and ng-bind-html again, it looks perfect. Unfortunately, I'm not quite sure how I'd go about doing that. Anyway, here's my code. I hope someone finds something I've missed. This is killing me.</p>
  
  <p>Here's my controller:</p>
  
  <pre><code>angular.module('finalApp')
  
      ...other controllers here...
  
      .controller('ModalCtrl', function ($scope, $modalInstance, $sce, post) {
          $scope.post = post.data;
          $scope.body = $sce.trustAsHtml($scope.post.selftext_html);
          ...
      });
  </code></pre>
  
  <p>I'm displaying the content in an Angular Bootstrap Modal window, so I pass in the post object from another controller which takes care of the JSON query.</p>
  
  <p>My view:</p>
  
  <pre><code>&lt;div ng-controller="MainCtrl"&gt;
      &lt;div class="modal-top"&gt;
          &lt;button class="btn btn-warning pull-right" ng-click="close()" style="margin:10px;"&gt;X&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="modal-header"&gt;
          &lt;h3 class="modal-title"&gt;{{post.title}}&lt;/h3&gt;
          &lt;h5 class=""&gt;{{post.author}}&lt;/h5&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;span ng-bind-html="body"&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My app.js:</p>
  
  <pre><code>angular.module('finalApp', [
      'ngResource',
      'ngRoute',
      'ui.bootstrap',
      'ngSanitize'
  ]) ...
  </code></pre>
  
  <p>My scripts included in index.html:</p>
  
  <pre><code>&lt;!-- build:js scripts/vendor.js --&gt;
  &lt;!-- bower:js --&gt;
  &lt;script src="bower_components/jquery/dist/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/angular/angular.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/bootstrap/dist/js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"&gt;&lt;/script&gt;
  &lt;!-- endbower --&gt;
  &lt;!-- endbuild --&gt;
  
  &lt;!-- build:js({.tmp,app}) scripts/scripts.js --&gt;
  &lt;script src="scripts/app.js"&gt;&lt;/script&gt;
  &lt;script src="scripts/controllers/main.js"&gt;&lt;/script&gt;
  &lt;!-- endbuild --&gt;
  
  &lt;!-- build:js scripts/modules.js --&gt;
  &lt;script src="bower_components/angular-resource/angular-resource.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/angular-cookies/angular-cookies.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/angular-sanitize/angular-sanitize.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/angular-route/angular-route.js"&gt;&lt;/script&gt;        
  &lt;!-- endbuild --&gt;
  </code></pre>
  
  <h1>Update</h1>
  
  <p>I wasn't having much success doing things correctly, so I decided to try running the string through $sce.trustAsHtml and ng-bind-html twice with a directive. It's ugly, but it works.</p>
  
  <p>Controller:</p>
  
  <pre><code>.controller('ModalCtrl', function ($scope, $modalInstance, $sce, $sanitize, post) {
      $scope.post = post.data;
  
      $scope.decodeHtml = function(html) {
          return $sce.trustAsHtml(html);
      };
  
      $scope.html = $sce.trustAsHtml($scope.post.selftext_html);
  
      $scope.close = function(){
          $modalInstance.dismiss();
      };
  
  });
  </code></pre>
  
  <p>View:</p>
  
  <pre><code>&lt;div ng-controller="MainCtrl"&gt;
      &lt;div class="modal-top"&gt;
          &lt;button class="btn btn-warning pull-right" ng-click="close()" style="margin:10px;"&gt;X&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="modal-header"&gt;
          &lt;h3 class="modal-title"&gt;{{post.title}}&lt;/h3&gt;
          &lt;h5 class=""&gt;{{post.author}}&lt;/h5&gt;
      &lt;/div&gt;
      &lt;div class=”modal-body”&gt;
          &lt;!-- holds first pass output, then hidden --&gt;
          &lt;span id="correct" ng-bind-html="html"&gt;&lt;/span&gt;
          &lt;!-- holds final output --&gt;
          &lt;div ng-bind-html="body"&gt;&lt;/div&gt;
          &lt;!-- exists to process html with directive --&gt;
          &lt;hello-world&gt;&lt;/hello-world&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Directive:</p>
  
  <pre><code>.directive('helloWorld', ['$timeout', function (timer) {
      /* Note the injection of the $timeout service */
      return {
          scope: true,
          restrict: 'AE',
      replace: 'true',
      template: '&lt;p ng-bind-html="body"&gt;&lt;/p&gt;',
          link: function (scope, elem, attrs, ctrl) {
              var hello = function () { 
                  var s = elem.parent().find('span').text();
                  scope.body = scope.decodeHtml(s);
                  elem.parent().find('span').hide();
              };
              timer(hello, 0);
          }
      };
  }]);
  </code></pre>