title: Get original transcluded content in Angular directive
body: <p>Is it possible to programmatically get the original transcluded content within an Angular.js directive? </p>
  
  <p>I'm trying to create an an <code>editable</code> directive which can be added to any div, allowing the user to edit the HTML content with custom angular directives. (The design goal is to avoid the need to add infinite configuration GUI features in the app, as power users can just edit the HTML...), e.g.:</p>
  
  <pre><code> &lt;div editable&gt;
        &lt;h1&gt;Lorem Ipsem&lt;/h1&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit...&lt;/p&gt;
        &lt;clock&gt;A custom directive&lt;/clock&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>See this Plunker as an example   (<a href="http://plnkr.co/edit/nIrr9Lu0PZN2PdnhQOC6?p=preview" rel="noreferrer">http://plnkr.co/edit/nIrr9Lu0PZN2PdnhQOC6?p=preview</a>): </p>
  
  <ul>
  <li>Click the edit icon on the solid grey bar to open the editor</li>
  <li>Enter in any well formed HTML with tags: 
  (e.g. <code>&lt;h1&gt;A title&lt;/h1&gt;&lt;p&gt;some content&lt;/p&gt;&lt;clock&gt;&lt;/clock&gt;</code>)</li>
  <li>Click "Apply"</li>
  </ul>
  
  <p>What I like about this so far:</p>
  
  <ul>
  <li>It can be added to any div</li>
  <li>It can include nested custom directives, by using $compile</li>
  <li>It includes the transcluded content</li>
  </ul>
  
  <p>What I can't figure out yet:</p>
  
  <ul>
  <li>How to get the raw transcluded content to initialize the textarea</li>
  </ul>
  
  <p>Within the compile function, <code>$transclude</code> seems to contain the template for <code>mydirective</code>, and with the controller function, <code>$transclude</code> contains the post-compiled content after things have been changed, directives rendered, etc.</p>