title: Can I get the compiled html of an Angular element?
body: <p>I have compiled an element using the $compile service.  If I add that directly to the DOM, it looks great and all of the bindings are correct.  If I want that element as a string though, it shows <code>{{stuffHere}}</code> instead of the bindings.  Is there a way to get the html of the element after it's compiled?</p>
  
  <pre><code>$templateCache.put('template', '&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;content is {{content}}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;   &lt;/div&gt;');
  
  $scope.content = 'Hello, World!';
  
  var el = $compile($templateCache.get('template'))($scope);
  $('body').append(el);
  
  alert(el.html());
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/1sxvuyUZKbse862PieBa?p=preview">http://plnkr.co/edit/1sxvuyUZKbse862PieBa?p=preview</a></p>
  
  <p>The element appended to the body shows <code>content is Hello, World!</code> </p>
  
  <p>The alert shows <code>&lt;div&gt;&lt;div&gt;&lt;span ng-binding&gt;{{content}}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;</code></p>
  
  <p>What I would like to see out of the alert is <code>&lt;div&gt;&lt;div&gt;&lt;span ng-binding&gt;Hello World&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;</code></p>