'Is it possible to externalize AngularJS directive controller?

Here is a directive in HTML:

   <wizard>
     <wz-step template="start.html"/>
     <wz-step template="end.html"/>
   </wizard>

Directive implementation:

angular.module('mgo-angular-wizard').directive('wzStep', function() {
    return {
        restrict: 'EA',
        replace: true,
        transclude: true,
        scope: {
            wzTitle: '@',
            canenter : '=',
            canexit : '=',
            disabled: '@?wzDisabled',
            description: '@',
            wzData: '=',
            wzOrder: '@?',
        },
        require: '^wizard',
        templateUrl: function(element, attributes) {
          return attributes.template || "step.html";
        },
        link: function($scope, $element, $attrs, wizard) {
            $scope.title = $scope.wzTitle;
            wizard.addStep($scope);
            $scope.$on('$destroy', function(){
                wizard.removeStep($scope);
            });
        }
    };
});

I want to associate the individual controllers with individual directive instances, something like:

   <wizard>
     <wz-step template="start.html" controller1/>
     <wz-step template="end.html" controller2/>
   </wizard>

i.e. start.html to associate with controller1 and end.html with controller2. Is that possible? if yes then how? Tried with ng-controller with but it is giving an error.

Note: The code is taken from https://github.com/mgonto/angular-wizard



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source