AngularJS Directive Controller definition

If the directive will break without the controller, then the directive should define the controller it needs. This creates a one-to-one association between the directive and controller.

Let's assume we have a "Booking" directive that needs "BookingController". It's redundant for developer to specific both the directive and controller each time they need to use the Booking directive. So the directive can define controller: "BookingController" and AngularJS will automatically instantiate that controller when the directive is used.

What if your directive is generic? You have a directive that only handles the formatting of the Booking order, but there are many controllers that handle different kinds of bookings. In this case, the directive would not define the controller. It would only define what it needs "booking_number" in the current scope. The developer would have to "use" that directive somewhere in the DOM "under" a controller that handles booking.

It's best to think of directives as code that publishes the current scope, but does not manipulate the current scope. Controllers are code that manipulate the current scope, but don't know how the scope is published. Views (or HTML) is where these two things are snapped together in order of dependencies.

Make sure you put quotes (" or ') around the controller name if you defined your controller outside directive or else it will show error

Wrong:

controller: MyController

Correct:

controller: 'MyController'

It makes a big difference; in the second case, the controller will injected at Bootstrap.

One important difference when providing a controller key to a directive is that the controller for that directive can be required by other directives for use. For example, here is a snippet of the two directives on the bottom of the AngularJS homepage:

app.directive('tabs', function() {
  return {
    // ...

    controller: function($scope, $element) {
      this.addPane = function() {
        // ...
      };
    },

    // ...
  };
});

app.directive('tab', function() {
  return {
    // ...

    // require the controller from the `tabs` directive
    // on a parent element
    require '^tabs',

    // required controller passed as fourth parameter
    link: function(scope, elem, attrs, tabsController) {
      tabsController.addPane(...);
    }
  };
});

<tabs>
  <tab>...</tab>
  <tab>...</tab>
</tabs>