Cannot call another function from within scope onSubmit function - angularjs

Question

I have a very simple form template and controller. But i'm unable to call a function from within the onSubmit scope function. Controller is:
angular
.module('myApp')
.controller('registerUserCtrl', registerUserCtrl);
function registerUserCtrl($scope, $location, $window, authenticationService, $http, vcRecaptchaService){
$scope.pageHeader = {
title: 'Register',
};
$scope.register = function (data) {
console.log('in scope.register ');
userService.register(data)
.success(function(data) {
console.log('setting to true.....');
authenticationService.isLoggedIn = true;
authenticationService.user = data.user;
authenticationService.token = data.token;
$location.path("/");
}).error(function(status, data) {
console.log(status);
console.log(data);
$scope.formError = "This email has already been taken";
});
}
$scope.onSubmit = function () {
console.log('in onSubmit');
//N.B. Need to veriify this
var response = vcRecaptchaService.getResponse();
$scope.formError = "";
if(!$scope.formData || !$scope.formData.email || !$scope.formData.password) {
$scope.formError = "All fields required, please try again";
return false;
} else {
console.log('$scope is ');
console.log($scope);
$scope.register($scope.formData);
}
};
}
And template is:
<div id="register-wrapper">
<form class="form-horizontal" role="form" ng-submit="onSubmit()">
<div role="alert" ng-show="formError" class="alert alert-danger">{{ formError }}</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-4 control-label">Email</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail" placeholder="Email" ng-model="formData.email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-4 control-label">Password</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="inputPassword" placeholder="Password" ng-model="formData.password">
</div>
</div>
<div vc-recaptcha key="'6Lf6aQsTAAAAAACdCxN2FqHHKpz0RyF9jMJsn6h4'"></div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-10">
<button type="submit" class="btn btn-default">Register</button>
</div>
</div>
</form>
</div>
I always end up with:
undefined is not a function
at the $scope.register($scope.formData); line. I've done this many times before, but somehow now its not working...

Answer 1

You need to inject userSevice in your controller as dependency
angular
.module('myApp')
.controller('registerUserCtrl', registerUserCtrl);
function registerUserCtrl($scope, $location, $window, authenticationService,
$http, vcRecaptchaService, userSevice)
{