Why does only the third of the three controller initialization options work?

Question

Angular

link to example
in app.js file

Thank you!

Answer 1

None of the options really work.
It's just that your directive receives the mailListCtrl function as a controller, which you declared in option 3.
Wrap the controller name in quotes:

mailApp.directive('mailList', function(){
    return {
        restrict: 'E',
        templateUrl: 'mailListDirective.html',
        controller: 'mailListCtrl',
        // replace: true,
        controllerAs: 'mailListCtrl'
    };
});

It's even better if you start using components introduced in Angular 1.5+
And here is a starter template using webpack for assembly and ES6 syntax, this is what a modern Angular 1 application looks like.