title: AngularJS: Insert HTML from a string
body: <p>I've looked a LOT for this, but I either I can't find the answer or I don't understand it.  A specific example will win the vote =)</p>
  
  <ul>
  <li>I have a function that returns an HTML string.</li>
  <li>I can't change the function.</li>
  <li>I want the html represented by the string to be inserted into the DOM.</li>
  <li>I'm happy to use a controller, directive, service, or anything else that works (and is reasonably good practice).</li>
  <li>Disclaimer:  I don't understand $compile well.</li>
  </ul>
  
  <p>Here's what I've tried:</p>
  
  <pre><code>// My magic HTML string function.
  function htmlString (str) {
      return "&lt;h1&gt;" + str + "&lt;/h1&gt;";
  }
  
  function Ctrl ($scope, $compile) {
    $scope.htmlString = htmlString;
  }
  Ctrl.$inject = ["$scope", "$compile"];
  </code></pre>
  
  <p>That didn't work.</p>
  
  <p>I tried it as a directive too:</p>
  
  <pre><code>// My magic HTML string function.
  function htmlString (str) {
      return "&lt;h1&gt;" + str + "&lt;/h1&gt;";
  }
  
  angular.module("myApp.directives", [])
    .directive("htmlString", function () {
      return {
        restrict: "E",
        scope: { content: "@" },
        template: "{{ htmlStr(content) }}"
      }
    });
  
    ... and in my HTML ...
  
    &lt;html-string content="foo"&gt;&lt;/html-string&gt;
  </code></pre>
  
  <p>Help?</p>
  
  <p><em>Note</em></p>
  
  <p>I looked at these, among others, but couldn't make it work.</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/9381926/insert-html-into-view-using-angularjs">AngularJS : Insert HTML into view</a></li>
  <li><a href="https://stackoverflow.com/questions/13141080/angularjs-http-html-parser">AngularJS $http HTML Parser</a></li>
  <li><a href="https://stackoverflow.com/questions/14737795/angularjs-inserting-compile-d-html">angularjs - inserting $compile-d html</a></li>
  <li><a href="https://stackoverflow.com/questions/13656533/angularjs-doesnt-execute-in-html-inserted-with-document-write">AngularJS doesn&#39;t execute in HTML inserted with document.write()</a></li>
  <li><a href="https://stackoverflow.com/questions/14462612/escape-html-text-in-an-angularjs-directive/14514299#14514299">Escape HTML text in an AngularJS directive</a></li>
  </ul>