title: AngularJS directive test fails - Why "element" has the a wrong value?
body: <p>Given the following directive, could one explain why the following test fails? <kbd><a href="http://plnkr.co/edit/hsAeXycsfIqSiRoXpzDO?p=preview" rel="noreferrer">DEMO</a></kbd></p>
  
  <p><strong>DIRECTIVE</strong></p>
  
  <pre><code>angular.module('plunker').directive('maybeLink', function($compile) {
    return {
      scope: {
        maybeLink: '=',
        maybeLinkText: '='
      },
      link: function(scope, element, attrs) {
  
        scope.$watch('maybeLinkText', function(newVal) {
          scope.text = newVal.replace(/\n/g, '&lt;br&gt;');
        });
  
        scope.$watch('maybeLink',function() {
          var newEl;
          if (scope.maybeLink) {
            newEl = $compile('&lt;a href="#"&gt;{{ text }}&lt;/a&gt;')(scope);
  
          } else {
            newEl = $compile('&lt;span&gt;{{ text }}&lt;/span&gt;')(scope);
          } 
          element.replaceWith(newEl);
          element = newEl;
        });
  
      } 
    };
  });
  </code></pre>
  
  <p><strong>TEST</strong></p>
  
  <pre><code>describe('Directive: maybeLink', function() {
    var scope, $compile;
  
    beforeEach(function() {
      module('plunker');
  
      inject(function($rootScope, _$compile_) {
        scope = $rootScope;
        $compile = _$compile_;
      });
    });
  
    function compile(html) {
      var element = $compile(html)(scope);
      scope.$digest();
      return element;
    }
  
    it('should create a link when link URL exists', function() {
      scope.myLinkText = 'Great Video';
      scope.myLinkURL = 'http://www.youtube.com/watch?v=rYEDA3JcQqw';
  
      var element = compile('&lt;span maybe-link="myLinkURL" maybe-link-text="myLinkText"&gt;&lt;/span&gt;');
  
      console.log(element[0].outerHTML); // =&gt; &lt;span maybe-link="myLinkURL" maybe-link-text="myLinkText" class="ng-isolate-scope ng-scope"&gt;&lt;/span&gt; 
      console.log(element.html());       // =&gt; (empty string)
  
      expect(element.text()).toBe('Great Video');
      expect(element.find('a').length).toBe(1);
    });
  });
  </code></pre>