title: Replacing directive's element with children breaks binding in Angular - why?
body: <p>Why does replacing the directive's element with its children breaks the children's bindings?</p>
  
  <p>Here's a very rudimentary example that illustrates the issue at question:</p>
  
  <pre><code>app.directive("foo", function(){
    return {
      template: "&lt;input ng-model='foo'&gt;&lt;pre&gt;foo: {{foo}}&lt;/pre&gt;",
      compile: function(tElem){
  
        // this line breaks the binding
        tElem.replaceWith(tElem.children());
      }
    };
  });
  </code></pre>
  
  <p>In HTML, the usage is as follows:</p>
  
  <pre><code>&lt;foo&gt;&lt;/foo&gt;
  </code></pre>
  
  <p>Same behavior if the <code>replaceWith</code> is done in the <code>link</code> function, or if the directive's scope was set to <code>true</code> or to <code>{}</code></p>
  
  <p><a href="http://plnkr.co/edit/Yll2T3TCuocD6aLAdTLQ?p=preview" rel="nofollow">plunker</a></p>