title: angularjs directive with dynamic templates and string interpolation
body: <p>The idea is to replace the directive element with the dynamic template which refers to interpolated strings.</p>
  
  <p>If I use element.html() in my directive then the strings are interpolated fine but this leaves the original custom directive html element.</p>
  
  <p>If I use element.replaceWith() then strings are not interpolated. I guess it has related to scope but can't figure out what's wrong.</p>
  
  <p>Plunker: <a href="http://plnkr.co/edit/HyBP9d?p=preview" rel="nofollow">http://plnkr.co/edit/HyBP9d?p=preview</a></p>
  
  <h2>UPDATE</h2>
  
  <p>Found the solution. Using <code>element.replaceWith($compile(html)(scope));</code> works.</p>
  
  <p>Updated plunker: <a href="http://plnkr.co/edit/HyBP9d?p=preview" rel="nofollow">http://plnkr.co/edit/HyBP9d?p=preview</a></p>