title: How to pass HTML to angular directive?
body: <p>I am trying to create an angular directive with a template, but I also don't want to lose the HTML inside of the div.  For example, here is how I would like to call my directive from HTML:</p>
  
  <pre><code>&lt;div my-dir&gt;
    &lt;div class="contents-i-want-to-keep"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then, there is my directive:</p>
  
  <pre><code>app.directive('myDir', [ '$compile', function($compile) {
  return {
      restrict: 'E',
      link: function(scope, iElement, iAttrs){
          // assigning things from iAttrs to scope goes here
      },
      scope: '@',
      replace: false,
      templateUrl: 'myDir.html'
  };
  }]);
  </code></pre>
  
  <p>and then there is myDir.html, where I define a new element:</p>
  
  <pre><code>&lt;div class="example" style="background: blue; height: 30px; width: 30px"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Even when I set replace to false, I lose the inner contents-i-want-to-keep div - my understanding of the angular docs was that this would be appended after my template.  Is there some way to preserve this (possibly through my linking function?) so that the result will be</p>
  
  <pre><code>&lt;div class="example" style="background: blue; height: 30px; width: 30px"&gt;
       &lt;div class="contents-i-want-to-keep"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks!</p>