title: AngularJS: Render HTML from scope variable with angular variables in the string
body: <p>Essentially what I am doing is requesting a template from my server. A short example of this looks something like this:</p>
  
  <pre><code>$scope.template = {
    'title': 'default',
    'description': 'default template',
    'html': '&lt;html&gt;&lt;head&gt;&lt;style&gt;body {background: red;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;{{data.name}}&lt;/body&gt;&lt;/html&gt;'
  }
  
  $scope.data = {
    name: 'John'
  }
  </code></pre>
  
  <p>This is the JSON object I am receiving from my server. I want to render this into the DOM. What would show up, is just what is store in <code>$scope.name</code>.</p>
  
  <p>I have this in my angular</p>
  
  <pre><code>app.filter("trust", ['$sce', function($sce) {
    return function(htmlCode){
      return $sce.trustAsHtml(htmlCode);
    };
  }]);
  </code></pre>
  
  <p>And this in my HTML</p>
  
  <pre><code>&lt;div ng-bind-html="template.html | trust"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This renders the html, but leaves {{name}} as {{name}}, when it should say John.</p>