title: Using $compile on external template (templateURL) in Angular directive
body: <p>I've got a recursive Angular directive that uses a template variable and gets compiled in the <code>link</code> function.</p>
  
  <p>Problem is, that my template has gotten really long and out of control and I want to externalize it in an external HTML file (it would also make it easier for example to auto-indent).</p>
  
  <p>How can you load an external template into a directive that can be used inside the <code>$compile</code>? </p>
  
  <p>I've seen <code>templateURL</code>, but that doesn't let me name the variable and pass it to the <code>$compile</code> function.</p>
  
  <pre><code>var template = 
             "&lt;p&gt;My template&lt;/p&gt;"+
             "&lt;this-directive val='pass-value'&gt;&lt;/this-directive&gt;";
  
  return {
       scope: {
       ...
       },
       ...
       link: function(scope, element){
              element.html(template);
              $compile(element.contents())(scope);
          }
  }
  </code></pre>
  
  <p>and </p>