title: Append html content to an iframe in Angular JS
body: <p>I am trying to create a preview of a full fledged html document, meaning this html content is itself a complete html document with <code>&lt;html&gt;</code>, <code>&lt;head&gt;</code>, <code>&lt;body&gt;</code> tags.</p>
  
  <p>If I would just load that html document into my existing html root, then all styles will be overridden by the ones defined in the newly included html doc. If I include this html document with an iframe over src (<code>&lt;ifram e src="path/to/doc.html"&gt;</code>) then it works. However, this doc.html is a template where I need to replace certain parts which I have annotated with custom tags. I am doing this by executing the following code</p>
  
  <pre><code>$.get('template/template.html', function (template) {
  
      String.prototype.format = function () {
          var args = arguments;
          this.unkeyed_index = 0;
          return this.replace(/\{(\w*)\}/g, function (match, key) {
              if (key === '') {
                  key = this.unkeyed_index;
                  this.unkeyed_index++
              }
              if (key == +key) {
                  return args[key] !== 'undefined'
                      ? args[key]
                      : match;
              } else {
                  for (var i = 0; i &lt; args.length; i++) {
                      if (typeof args[i] === 'object' &amp;&amp; typeof args[i][key] !== 'undefined') {
                          return args[i][key];
                      }
                  }
                  return match;
              }
          }.bind(this));
      };
  
      var renderedHtml = template.format({hello: "hey there"});
  });
  </code></pre>
  
  <p>So far this works fine. In the variable <code>renderedHtml</code> I have my complete html document and the placeholders are being replaced (in this case the placeholder hello is being replaced with "hey there". </p>
  
  <p>No I have the following html snippet</p>
  
  <pre><code>&lt;iframe id="test"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>and I tried the following code:</p>
  
  <pre><code>  var elem = document.createElement('div');
    elem.innerHTML = renderedHtml;
    document.getElementById('test').appendChild(elem);
    $compile(elem)($scope);
  </code></pre>
  
  <p>Unfortunately, nothing changes on the view. However, if I call <code>appendChild(elem)</code> on <code>document.body</code> then it works. Does anyone know what the problem could be?</p>
  
  <p>P.S. I know that you should not do DOM manipulations in your angular controller and instead of $compile you should do it with a directive. However, if this way works then I am happy to try to refactor it to a directive :).</p>