Angular ng-submit not firing the desired controller method [duplicate]

Question

In Angular 1.4.7, I'm trying to implement a basic login form in this plunk http://plnkr.co/edit/xQEN1ZNN5ZEw1CSwNw97?p=preview (Please click on the red Log into Dashboard button on the Home route).

However for some reason I cannot get the login() method to fire in my loginCtrl controller code.

Instead what it's doing is an old-school URL redirect with the user/password parameters passed in as form variables. I can't figure out what's wrong.

Key points here in my posted code:

1) login-form.html contains ng-submit="login.loginUser()"

2) app.config contains the login route 'login' which hooks into 'LoginCtrl as login'

3) 'LoginCtrl' contains anonymous method login.loginUser

4) app.js redirects to my login state if userId is undefined.

Here's the login-form.html template :

<div ng-show="error" class="alert alert-danger">{{error}}</div>
<form name="form" ng-submit="login.loginUser()" role="form">
    <div class="form-group">
        <label for="username">Username</label>
        <i class="fa fa-key"></i>
        <input type="text" name="username" id="username" class="form-control" ng-model="login.username" required />
        <span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span>
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <i class="fa fa-lock"></i>
        <input type="password" name="password" id="password" class="form-control" ng-model="login.password" required />
        <span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>
    </div>
    <div class="form-actions">
        <button type="submit" ng-disabled="form.$invalid || dataLoading" class="btn btn-danger">Login</button>
        <img ng-if="login.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="/>
    </div>
</form>

and my Login Controller code :

(function () {
    'use strict';
    angular.module('rage').controller('LoginCtrl',
        ['$rootScope', '$scope', '$cookies', '$modalInstance', '$q', 'datacontext', 'loginService', 'userService', authenticate]);

    function authenticate($rootScope, $scope, $cookies, $modalInstance, $q, datacontext, loginService, userService) {

        var login = this;

        login.loginUser = function () {
            login.dataLoading = true;
            loginService.authUser(login.user, login.password);
        };

    }
})();

Here's the app.config with routes:

angular
.module('rage')
.config(config);

function config($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/login");
$stateProvider
.state('main', {
    url: "/dashboard",
    templateUrl: "app/views/dashboard.html",
    controller: 'MainCtrl',
    data: { pageTitle: 'RAGE', requireLogin: true }
})
.state('login', {
    url: "/login",
    templateUrl: "app/components/login/login-form.html",
    controller: 'LoginCtrl'
    controllerAs: 'login'
})

}

and my app.js

(function () {
    'use strict';
    angular.module('rage', [
       'ui.router',
       'ui.bootstrap',
       'ui.dashboard',
       'kendo.directives',
       'ngCookies'     
    ]).run(['$rootScope', '$state',  '$location', 'userService', 'loginService', init]);

    function init($rootScope, $state, $location, userService, loginService) {
        $rootScope.rageSessionVars = {};
        $rootScope.$state = $state;

        
        if ($rootScope.rageSessionVars.userID == undefined) {
            $state.go('login');
        }
              
    }

})();

Answer 1

Looks like you are not creating any module. You are writing angular.module('rage') instead you should write angular.module('rage', []) in your app.config file.

From the doc: https://docs.angularjs.org/api/ng/function/angular.module

To create a new module:

// Create a new module
var myModule = angular.module('myModule', []);

Then define your module as ng-app="rage" in your HTML's body or <html> tag.

Since, you are not creating any module at all and not enabling the Angular in your HTML, your form is getting submitted like old-school form submission.

So modify your app config as:

var myModule = angular.module('rage', [])
    .config(config) // ... your code

And, your controller code is fine but you can also use it like:

myModule.controller('LoginCtrl', function() {}) // ....