title: How to inject a controller into a directive when unit-testing
body: <p>I want to test an AngularJS directive declared like this</p>
  
  <pre><code>app.directive('myCustomer', function() {
      return {
        template: 'cust.html'
        controller: 'customerController'
      };
    });
  </code></pre>
  
  <p>In the test I would like to inject (or override) the controller, so that I can test just the other parts of the directive (e.g. the template). The <code>customerController</code> can of course be tested separately. This way I get a clean separation of tests.</p>
  
  <ul>
  <li>I have tried overriding the controller by setting the controller property in the test. </li>
  <li>I have tried injecting the <code>customController</code> using <code>$provide</code>. </li>
  <li>I have tried setting <code>ng-controller</code> on the html directive declaration used in the test.</li>
  </ul>
  
  <p>I couldn't get any of those to work. The problem seems to be that I cannot get a reference to the directive until I have <code>$compile</code>d it. But after compilation, the controller is already set up.</p>
  
  <pre><code> var element = $compile("&lt;my-customer&gt;&lt;/my-customer&gt;")($rootScope);
  </code></pre>