AngularJS - Example - render html source and preview Load html template into controller: http://stackoverflow.com/questions/24496201/load-html-template-from-file-into-a-variable-in-angularjs

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example of loading HTML into controller and rendering with filter</title>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-sanitize.js"></script>
  <script src="script.js"></script>
  
</head>

<body ng-app="bindHtmlExample">
  <div ng-controller="ExampleController">
myHTML (no filter, colors won't work): <p ng-bind-html="myHTML "></p>
myHTML with renderHTML filter applied: <p ng-bind-html="myHTML | renderHTML"></p>
 <br>
 
 <div ng-repeat="mod in modules">
   {{mod.label}}: <span ng-bind-html="mod.html | renderHTML"></span>
   <pre>{{mod.html}}</pre><br>
 </div>
</div>
</body>
</html>

<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

(function(angular) {
  'use strict';
  
var app = angular.module("bindHtmlExample", ['ngSanitize']);

app.controller('ExampleController', function($scope, $templateCache, $templateRequest, $sce, $compile) {
    $scope.myHTML =
       'I am an <code>HTML</code>string with ' +
       '<a href="#">links!</a> and other <em>stuff</em>';
  

  // http://stackoverflow.com/questions/24496201/load-html-template-from-file-into-a-variable-in-angularjs
  // Using $templateRequest, you can load a template by its URL
  // without having to embed it into your HTML page.
  // If the template is already loaded, it will be taken from the cache.
  
  // Make sure that no bad URLs are fetched.
  // You can omit this if your template URL is not dynamic.
    var templateUrl = $sce.getTrustedResourceUrl('external_static_template.html');
    $templateRequest(templateUrl).then(function(template) {
        // template is the loaded HTML template as a string
        $scope.myHTML = template;
    }, function() {
        // An error has occurred
    });
    
  
  $scope.modules = [];
  $scope.modules.push({label: "Red (A"+1+")", fcolor: "red", text: "hello", html: "html string that should <b>not</b> be used" });
  $scope.modules.push({label: "Blue (A"+2+")", fcolor: "blue", text: "hi", html: "html string that should <em>not</em> be used" });
  $scope.modules.push({label: "Green (A"+3+")", fcolor: "green", text: "hey ya", html: "html string that should <ins>not</ins> be used" });

  

  });


app.filter('renderHTML', function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
});
 
  
})(window.angular);

 
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

it('should check ng-bind-html', function() {
  expect(element(by.binding('myHTML')).getText()).toBe(
      'I am an HTMLstring with links! and other stuff');
});

/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

<span style="background-color: red;">hello,</span> I am an <code>HTML</code>string with <a href="#">links!</a> and other <em>stuff</em>

<h4 style="color: {{fcolor}};">{{text}}</h4>