title: transclude: 'element' along with templateUrl, is it feasible?
body: <p>I have a directive that puts the element on an isolated scope and apply a controller to it, so it can deal with state, AJAX calls and validation.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div login&gt; 
    &lt;div class="dropdown" ng-click="loginctrl.showForm()"&gt;
      Login &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The current transcluded element becomes:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!-- login --&gt;
  &lt;div class="login"&gt;
    &lt;div class="dropdown" ng-click="loginctrl.showForm()"&gt;
      Login &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But I have a <code>templateUrl</code> that I want to append along with the contents of the directive, so I'm using <code>transclude: 'element'</code> to fine grain the transclusion:</p>
  
  <pre class="lang-js prettyprint-override"><code>angular
  .module('Login.module', [])
  .controller('LoginCtrl', function(){
    this.login = function(){
       // do ajax calls for login
    };
  
    this.logout = function(){ 
       // do ajax calls for logout
    };
  
    this.facebook = function(){  
      // do ajax calls for facebook login
    };
  
    this.showForm = function(){
       // shows the template form
    };
  
    this.user = {}; // user model
  })
  .directive('login', function(){
    return {
      restrict: 'A',
      transclude: 'element',
      controllerAs: 'loginctrl',
      controller: 'LoginCtrl',
      replace: false,
      templateUrl: '/templates/login',
      link: function(scope, element, attrs, ctrl, transclude){
        transclude(scope, function(clone){
          clone.wrap('&lt;div class="login"&gt;&lt;/div&gt;');
          element.after(clone); // "element" is the &lt;!-- login --&gt; HTML comment
          // "clone" is the transcluded contents of the div, that is the login with ng-click, etc
        });
      }
    }
  });
  </code></pre>
  
  <p>The <code>templateUrl</code> (that is a login / register form) is downloaded through AJAX (see it in dev tools), but it can't be used inside the link function nor the transclude. Am I missing something? Couldn't find any help in this regard and I've been looking for a few days now.</p>
  
  <p>Dumbed down version of the problem <a href="http://plnkr.co/edit/NzS7cAej17RnQxARlli3?p=preview" rel="nofollow">http://plnkr.co/edit/NzS7cAej17RnQxARlli3?p=preview</a></p>