title: How to test a directive's controller using angularJS-karma-jasmine?
body: <h2>Goal:</h2>
  
  <p>Write a passing test for the <code>waCarousel</code> directive scope variable: <code>self.awesomeThings</code>.  Expect this test pass when <code>self.awsomeThings.length.toBe(3)</code> to is true?</p>
  
  <h2><strong>Question:</strong></h2>
  
  <p>How can I properly write this test? rather how do I inject a directives controller?</p>
  
  <hr>
  
  <p><strong>Directive:</strong></p>
  
  <pre><code>angular.module('carouselApp')
      .directive('waCarousel', function() {
          return {
              templateUrl: '../../../views/carousel/wa.carousel.html',
              controller: function($scope) {
                  var self = this;
  
                  self.awesomeThings = [1, 2, 3];
  
                  return $scope.carousel = self;
              }
          }
      });
  </code></pre>
  
  <p><strong>Unit Test:</strong></p>
  
  <pre><code>describe('waCarousel Unit', function() {
    // am I missing a $controller &amp; namespace variable init?
     var $compile,
        $rootScope;
  
  
    // Load the myApp module, which contains the directive
    beforeEach(module('carouselApp'));
  
    // Store references to $rootScope and $compile and $controller
    // so they are available to all tests in this describe block
    beforeEach(inject(function(_$compile_, _$rootScope_, _$controller_){
      // The injector unwraps the underscores (_) from around the parameter names when matching
      $compile = _$compile_;
      $rootScope = _$rootScope_;
      $controller = _$controller_;
       //   WaCarouselCtrl = $controller('WaCarouselCtrl', {
       //       $scope: scope
       //   });
    }));
  
    it('should have a list of awesomeThings', function() {
      // This wont pass       
      expect(scope.awesomeThings.length).toBe(3);
    });
  });
  </code></pre>
  
  <p><em>This is how I would do it for a typical view and not directive:</em></p>
  
  <pre><code>describe('Controller: MainCtrl', function() {
  
      // load the controller's module
      beforeEach(module('carouselApp'));
  
      var MainCtrl,
          scope;
  
      // Initialize the controller and a mock scope
      beforeEach(inject(function($controller, $rootScope) {
          scope = $rootScope.$new();
          // !!*** this is how I would inject the typical controller of a view **!! //
          MainCtrl = $controller('MainCtrl', {
              $scope: scope
          });
      }));
  
      it('should attach a list of awesomeThings to the scope', function() {
          expect(scope.awesomeThings.length).toBe(3);
      });
  });
  </code></pre>
  
  <p>How do I merge these two concepts so that I can expect <code>self.awesomeThings.length).toBe(3)</code>?</p>
  
  <p>UPDATE:
  <img src="https://i.stack.imgur.com/uJDpA.png" alt="enter image description here"></p>