AngularJS Event Handler Does not fire

Question

I have a form that I am trying to submit via the ng-submit event via a custom Auth service.

login.html (partial template)

<div class='container'>
    <form class='form-signin' role='form' ng-submit='login()'>
        <h2 class='form-signin-heading'>dotAdmin login</h2>
        <input type='email' class='form-control' placeholder='Email Address' ng-model='email' required autofocus>
        <input type='password' class='form-control' placeholder='Password' ng-model='password' required>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    </form>
</div>

services.js

/* Services */
var dotAdminServices = angular.module('dotAdminServices', []);

// don't know if loading http and rootscope dependencies are redundant
dotAdminServices.factory('SessionService', [function () {
    return {
        isLogged: false,
        userId: null,
        name: null,
        email: null,
        password: null,
        imageUrl: null,
        coverUrl: null
    };
}]);

dotAdminServices.factory('AuthService',['$http', 'SessionService', '$location', 
function ($http, SessionService, $location) {
    var login = function (email, pw) {
        $http.post('http://54.187.31.161/api/v1/users/sign_in', {'email': email, 'password': pw}).
            success(function (data) {
                    SessionService.isLogged = true,
                    SessionService.name = data.name,
                    SessionService.id = data.id,
                    SessionService.email = email,
                    SessionService.password = pw,
                    SessionService.coverUrl = data.coverUrl,
                    SessionService.imageUrl = data.imageUrl;
                    $location.url('/dashboard');
                }
            ).
            error(function(){
                    SessionService.isLogged = false,
                    SessionService.name = null,
                    SessionService.id = null,
                    SessionService.email = null,
                    SessionService.password = null,
                    SessionService.coverUrl = null,
                    SessionService.imageUrl = null;
                }
            );
    };

    var logout = function () {
        $http.delete('http://54.187.31.161/api/v1/users/sign_out', {'email': email, 'password': pw}).
            success(function () {
                SessionService.isLogged = false,
                SessionService.name = null,
                SessionService.id = null,
                SessionService.email = null,
                SessionService.password = null,
                SessionService.coverUrl = null,
                SessionService.imageUrl = null;
            });
    };
}]);

and the controller.js

/* Controllers */
var dotAdminControllers = angular.module('dotAdminControllers', []);

dotAdminControllers.
controller('loginCtrl', ['SessionService', 'AuthService', '$location', '$http', '$scope',
    function($scope, $http, $location, SessionService, AuthService){
        $scope.dummy = 'stringtest';
        $scope.login = function () {
            alert('function executed');
        };
        }
]);

Interesting thing is: when I run a unit test to access scope variables, they all appear to be undefined. I also tried defining a dummy variable in the $scope and using a {{dummy}} on login.html to test, yet it does not bind and does not appear on the page. Furthermore, when I set a breakpoint in controller.js, all of the ServiceSession variables seem to be in local scope. I'm so confused. Are there multiple variable scopes, which the injector collapses into the local scope? I realize that the event handler does not fire because it is undefined when the page loads, but why is this happening?

Thanks so much in advance for your responses and for trudging through my lengthy post.

Answer 1

Dependency injection using an inline array, will pass the dependencies in the order which they are declared. So in your case, the function params should look like this:

function(SessionService, AuthService, $location, $http, $scope)

Currently, what you are calling $scope in your function, is in fact SessionService, due to it being the first dependency.