AngularJS Controller Inheritance Patterns?

Question

I have below controller code

myApp.controller('SteppersCtrl', ['$scope', '$http',  
    , function ($scope, $http) {



     var SteppersCtrl= (function () {
    function SteppersCtrl($mdStepper, $timeout) {
        alert('hi');
        this.$mdStepper = $mdStepper;
        this.$timeout = $timeout;
        this.isVertical = true;
        this.isLinear = false;
        this.isAlternative = true;
        this.isMobileStepText = true;
        this.campaign = false;
    }

    SteppersCtrl.prototype.selectCampaign = function () {

        var _this = this;
        var steppers = this.$mdStepper('stepper-demo');
        steppers.showFeedback('Checking, please wait ...');
        this.$timeout(function () {
            if (_this.campaign) {
                steppers.clearError();
                steppers.next();
            }
            else {
                _this.campaign = !_this.campaign;
                steppers.error('Wrong campaign');
            }
        }, 3000);
    };
    SteppersCtrl.prototype.previousStep = function () {
        var steppers = this.$mdStepper('stepper-demo');
        steppers.back();
    };
    SteppersCtrl.prototype.cancel = function () {
        var steppers = this.$mdStepper('stepper-demo');
        steppers.back();
    };
    SteppersCtrl.prototype.nextStep = function () {
        var steppers = this.$mdStepper('stepper-demo');
        steppers.next();
    };
    SteppersCtrl.prototype.toggleMobileStepText = function () {
        this.isMobileStepText = !this.isMobileStepText;
    };
    SteppersCtrl.prototype.toggleLinear = function () {
        this.isLinear = !this.isLinear;
    };
    SteppersCtrl.prototype.toggleAlternative = function () {
        this.isAlternative = !this.isAlternative;
    };
    SteppersCtrl.prototype.toggleVertical = function () {
        this.isVertical = !this.isVertical;
    };
    SteppersCtrl.prototype.showError = function () {
        var steppers = this.$mdStepper('stepper-demo');
        steppers.error('Wrong campaign');
    };
    SteppersCtrl.prototype.clearError = function () {
        var steppers = this.$mdStepper('stepper-demo');
        steppers.clearError();
    };
    SteppersCtrl.prototype.showFeedback = function () {
        var steppers = this.$mdStepper('stepper-demo');
        steppers.showFeedback('Step 1 looks great! Step 2 is comming up.');
    };
    SteppersCtrl.prototype.clearFeedback = function () {
        var steppers = this.$mdStepper('stepper-demo');
        steppers.clearFeedback();
    };
    SteppersCtrl.$inject = [
        '$mdStepper',
        '$timeout'
    ];
    return SteppersCtrl;

}());  
  SteppersCtrl();
}]);

But in html file selectCampaign not able to call on button click.

<div ui-view ng-controller="SteppersCtrl as vm" layout="column">
.................................
.................................
.................................
<md-button class="md-primary md-raised" ng-click="vm.selectCampaign();"/>
.................................

Answer 1

The problem is that in your case controller should return an instance of SteppersCtrl (return new SteppersCtrl()). Angular creates instance of an controller using new but if controller constructor explicitly returns an object this object will be used as a result (this is how using constructors works in javascript - more details here). However, because SteppersCtrl constructor expects some dependencies to inject it will not work in this case (if you create instance of object manually with new keyword Angular is not aware ot this and will not inject dependencies). One of the solution is to move whole SteppersCtrl definition outside angular controller method and then register it as a controller. Something like this:

function SteppersCtrl($mdStepper, $timeout) {
    alert('hi');
    this.$mdStepper = $mdStepper;
    this.$timeout = $timeout;
    this.isVertical = true;
    this.isLinear = false;
    this.isAlternative = true;
    this.isMobileStepText = true;
    this.campaign = false;
}

SteppersCtrl.prototype.previousStep = function () {
    var steppers = this.$mdStepper('stepper-demo');
    steppers.back();
};
SteppersCtrl.prototype.cancel = function () {
    var steppers = this.$mdStepper('stepper-demo');
    steppers.back();
};
SteppersCtrl.prototype.nextStep = function () {
    var steppers = this.$mdStepper('stepper-demo');
    steppers.next();
};
SteppersCtrl.prototype.toggleMobileStepText = function () {
    this.isMobileStepText = !this.isMobileStepText;
};
SteppersCtrl.prototype.toggleLinear = function () {
    this.isLinear = !this.isLinear;
};
SteppersCtrl.prototype.toggleAlternative = function () {
    this.isAlternative = !this.isAlternative;
};
SteppersCtrl.prototype.toggleVertical = function () {
    this.isVertical = !this.isVertical;
};
SteppersCtrl.prototype.showError = function () {
    var steppers = this.$mdStepper('stepper-demo');
    steppers.error('Wrong campaign');
};
SteppersCtrl.prototype.clearError = function () {
    var steppers = this.$mdStepper('stepper-demo');
    steppers.clearError();
};
SteppersCtrl.prototype.showFeedback = function () {
    var steppers = this.$mdStepper('stepper-demo');
    steppers.showFeedback('Step 1 looks great! Step 2 is comming up.');
};
SteppersCtrl.prototype.clearFeedback = function () {
    var steppers = this.$mdStepper('stepper-demo');
    steppers.clearFeedback();
};

SteppersCtrl.$inject = [
    '$mdStepper',
    '$timeout'
];


myApp.controller('SteppersCtrl',  SteppersCtrl);