title: Rendering HTML preview from Kendo Editor with Angular
body: <p>I am attempting to implement the <code>Kendo UI Editor</code> with <code>Angular</code>, per the example on their demos website. So far it works pretty well;</p>
  <h1><strong><a href="http://demos.telerik.com/kendo-ui/editor/angular" rel="nofollow noreferrer">kendo ui demos</a></strong></h1>
  <p>This is what I have so far, but the problem I am having is actually rendering a fully parsed <strong>preview</strong> of the contents of the editor. When I use <code>ng-bind-html</code>, it works when the page first loads, but then any subsequent edits have HTML peppered into it. I thought the answer would be to use <code>kendo.htmlEncode</code>, but that isn't working either. I'm not quite getting the hang of this like I thought I would...</p>
  <p>I have prepared a jsBin to show what is going wrong, as well as posted my code here for review.</p>
  <h1><a href="http://jsbin.com/tahitu/1/edit?html,js,output" rel="nofollow noreferrer">jsBin</a></h1>
  <h1>app.js</h1>
  <pre><code>(function(){
      var app = angular.module(&quot;kendoDemos&quot;, [ 'kendo.directives', 'ngSanitize' ]);
      app.controller('EditorController', function($scope, $sce){
          $scope.html = &quot;&lt;h1&gt;Kendo Editor&lt;/h1&gt;\n\n&quot; +
              &quot;&lt;p&gt;Note that 'change' is triggered when the editor loses focus.\n&quot; +
              &quot;&lt;br /&gt; That's when the Angular scope gets updated.&lt;/p&gt;&quot;;
      });
      app.directive('kendoHtml', function() {
          return {
              restrict: 'A',
              link: function(scope, element, attrs) {
                  return element.html(kendo.htmlEncode(scope[attrs.kendoHtml]));
              }
          };
      });
  })();
  </code></pre>
  <h1>html</h1>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head lang=&quot;en&quot;&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap.css&quot; /&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;css/kendo.css&quot; /&gt;
  
      &lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;js/bootstrap.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;js/angular.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;js/angular.sanitize.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;js/kendo.js&quot;&gt;&lt;/script&gt;
  
      &lt;script type=&quot;text/javascript&quot; src=&quot;js/app.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div ng-app=&quot;kendoDemos&quot;&gt;
          &lt;div ng-controller=&quot;EditorController&quot; class=&quot;container&quot;&gt;
              &lt;h2&gt;Kendo Editor&lt;/h2&gt;
              &lt;textarea kendo-editor ng-model=&quot;html&quot;&gt;&lt;/textarea&gt;
              &lt;h3&gt;Kendo Editor Preview&lt;/h3&gt;
              &lt;blockquote kendo-html=&quot;html&quot;&gt;&lt;/blockquote&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>