title: Element with directive doesn't $compile properly in unit test
body: <p>My directive runs fine in the browser. It's just the unit test I can't seem to get working. The directive creates a simple slider, and sets a few values on the scope, including <code>min</code>.</p>
  
  <p>In the unit test, $compile(element) seems to just wrap it in jqlite without doing anything else with it. Well, it also gives it a scope apparently, but there's nothing on the scope. The template also hasn't been applied.</p>
  
  <p>My unit test:</p>
  
  <pre><code>describe('Given the slider directive', function () {
  
  beforeEach(function() {
      module('app');
  });
  
  beforeEach(inject(function($httpBackend){
      // necessary because .whenGET().passThrough() doesn't seem to work
      $httpBackend.whenGET('partials/slider.html').respond('&lt;div class="slider horizontal"&gt;'+
          '&lt;div class="min"&gt;{{min}}&lt;/div&gt;'+
          '&lt;div class="max"&gt;{{max}}&lt;/div&gt;'+
          '&lt;a slider-handle class="handle" ng-class="{focus: focus}"'+
          'role="slider"'+
          'aria-valuemin="{{min}}" aria-valuemax="{{max}}" aria-valuenow="{{slider.value}}" aria-labelledby="{{id}}-label" aria-controls="{{id}}-value"'+
          'tabindex="0"'+
          'ng-keydown="handleKeyDown($event)" ng-keypress="handleKeyPress($event)"'+
          'ng-focus="handleFocus($event)" ng-blur="handleBlur($event)"'+
          'ng-mousedown="handleMouseDown($event)"'+
          'ng-style="{\'left\': slider.left}"&gt;&lt;/a&gt;'+
          '&lt;div ng-style="{\'left\': slider.left}" ng-show="showVals" id="{{id}}-value" class="slider-value" role="presentation"&gt;{{slider.value}}&lt;/div&gt;'+
      '&lt;/div&gt;');
  }));
  
  it('should compile and set the scope correctly', inject(function($compile, $rootScope) {
      var element = $compile('&lt;div slider min="6" max="18" step="1" ng-model="value"&gt;&lt;/div&gt;')($rootScope);
      $rootScope.$digest();
  
      var iScope = element.scope();
  
      iScope.$digest();
  
      console.log(iScope);
      console.log(iScope.min);
      console.log(element.html());
      console.log(element);
  
      expect(element.html()).toContain("6");
      expect(element.find('div[class=min]').html()).toBe(6);
      expect(iScope.min).toBe(6);
  
  }));
  });
  </code></pre>
  
  <p>The console output of this is:</p>
  
  <pre><code>Scope{$id: '00T', $$childTail: null, $$childHead: null, $$prevSibling: null, $$nextSibling: null, $$watchers: null, $parent: null, $$phase: null, $root: Scope{$id: '00T', $$childTail: null, $$childHead: null, $$prevSibling: null, $$nextSibling: null, $$watchers: null, $parent: null, $$phase: null, $root: Scope{$id: ..., $$childTail: ..., $$childHead: ..., $$prevSibling: ..., $$nextSibling: ..., $$watchers: ..., $parent: ..., $$phase: ..., $root: ..., this: ..., $$destroyed: ..., $$asyncQueue: ..., $$postDigestQueue: ..., $$listeners: ..., $$isolateBindings: ..., safeApply: ...}, this: Scope{$id: ..., $$childTail: ..., $$childHead: ..., $$prevSibling: ..., $$nextSibling: ..., $$watchers: ..., $parent: ..., $$phase: ..., $root: ..., this: ..., $$destroyed: ..., $$asyncQueue: ..., $$postDigestQueue: ..., $$listeners: ..., $$isolateBindings: ..., safeApply: ...}, $$destroyed: false, $$asyncQueue: [], $$postDigestQueue: [], $$listeners: Object{}, $$isolateBindings: Object{}, safeApply: function (a) { ... }}, this: Scope{$id: '00T', $$childTail: null, $$childHead: null, $$prevSibling: null, $$nextSibling: null, $$watchers: null, $parent: null, $$phase: null, $root: Scope{$id: ..., $$childTail: ..., $$childHead: ..., $$prevSibling: ..., $$nextSibling: ..., $$watchers: ..., $parent: ..., $$phase: ..., $root: ..., this: ..., $$destroyed: ..., $$asyncQueue: ..., $$postDigestQueue: ..., $$listeners: ..., $$isolateBindings: ..., safeApply: ...}, this: Scope{$id: ..., $$childTail: ..., $$childHead: ..., $$prevSibling: ..., $$nextSibling: ..., $$watchers: ..., $parent: ..., $$phase: ..., $root: ..., this: ..., $$destroyed: ..., $$asyncQueue: ..., $$postDigestQueue: ..., $$listeners: ..., $$isolateBindings: ..., safeApply: ...}, $$destroyed: false, $$asyncQueue: [], $$postDigestQueue: [], $$listeners: Object{}, $$isolateBindings: Object{}, safeApply: function (a) { ... }}, $$destroyed: false, $$asyncQueue: [], $$postDigestQueue: [], $$listeners: Object{}, $$isolateBindings: Object{}, safeApply: function (a) { ... }}
  undefined
  ''
  {0: &lt;div slider="" min="6" max="18" step="1" ng-model="value" class="ng-scope"&gt;&lt;/div&gt;, length: 1}
  </code></pre>
  
  <p>I've got a <a href="http://jsfiddle.net/QGmCF/32/" rel="nofollow">JSFiddle with the entire (slightly cleaned up) code</a>, but there it mysteriously doesn't even get past the $compile, which is not the same problem I have locally. Not sure if the JSFiddle is any use, because now I've got two mysterious problems instead of one.</p>