angularjs controller function is not getting executed

Question

I have a controller for login and I am not sure why the function within the loginController is not being executed. When I debug thru Chrome, I can see that it is executing line (var controllerId = 'login';) but it does not execute line inside the function.

I have similar controller for shell page and I can see that the code is executing inside the function of this controller.

I am wondering what makes these two controllers different.

Thank you!

loginController.js

(function () {
'use strict';
var controllerId = 'login';
angular.module('app').controller(controllerId,
     ['$rootScope', loginController]);

function loginController($rootScope) {
    var vm = this;
    activate();

    function activate() {
    }
};
})();

shellController.js

(function () {
'use strict';
var controllerId = 'shell';
angular.module('app').controller(controllerId,
    ['$rootScope', shellController]);

function shellController($rootScope) {
    var vm = this;

    activate();

    function activate() {
    }

};
})();

Index.html

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<script src="app/app.js"></script>
<script src="app/layout/controllers/shellController.js"></script>
<script src="app/layout/controllers/topnavController.js"></script>
<script src="app/layout/controllers/sidebarController.js"></script>
<script src="app/security/controllers/loginController.js"></script>

App.js

(function () {
'use strict';

var app = angular.module('app', [
    'ngRoute'
]);

app.constant('routes', getRoutes());
function getRoutes() {
    return [
        {
            url: '/',
            config: {
                templateUrl: 'app/dashboard/dashboard.html',
                title: 'dashboard',
                settings: {
                    nav: 1,
                    content: 'Dashboard'
                }
            }
        }, {
            url: '/login/:redirect*?',
            config: {
                title: 'login',
                templateUrl: 'app/security/views/login.html',
                settings: {
                    content: 'Login'
                }
            }
        }
    ];
}

app.config(['$routeProvider', 'routes', routeConfigurator]);
function routeConfigurator($routeProvider, routes) {
    routes.forEach(function (r) {
        $routeProvider.when(r.url, r.config);
    });
    $routeProvider.otherwise({ redirectTo: '/' });
    var count = routes.length;
}



app.run(['$route', function ($route) {

}]);

})();

Answer 1

Look elsewhere in your index.html - do you see ng-controller="shellController" anywhere? Or maybe in your app.js it could look like:

angular.module('app').config('$routeProvider', function($routeProvider) {
  $routeProvider.
    when('/', {
      templateUrl: 'index.html',
      controller: 'shellController'
   ........

Which means the controller and view is loaded dynamically so you might not have noticed it just by looking at index.html

Answer 2

you can't put controller name as a variable.so use following code:

loginController.js:

  (function () {
    var controllerId = 'login';
    var loginController=function ($rootScope) {
        var vm = this;
        console.log("mk")
        function activate() {
          console.log("mk");
        }
        activate();
    }

    angular.module('app').controller('login',
         ['$rootScope', loginController]);
    })();

see this plunker

Answer 3

Thank you all for your answer. I figured out my problem. My javascript did not have any problem at all. I had a typo silly mistake in my html file. In my login.html, I have code below.

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main data-ng-controller="login as vm">

I was missing a double quote before the data-ng-controller. I changed the html to below and it worked.

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" data-ng-controller="login as vm">