Controller Function is not getting called on ng-click

Question

This is my View Code

<div ng-controller="signupCtrl">
<ul class="list-group" >
    <li class="list-group-item">
        <div class="form-group">
            <input type="text" ng-model="signupCtrl.firstName">
        </div>
    ...
        </div>


        <div class="form-group">
            <div class="pull-right">
                <button ng-click="signupCtrl.signupUser()">Register</button>
            </div>
        </div>
    </li>
</ul>
</div>

Update- This is my Controller Code ##

someAppControllers.controller('signupCtrl', [
    '$window', 
    '$scope',     
    'HttpReqHandlerService',     
    '$location', 
    'localStorageService'],
    function($window, $scope, HttpReqHandlerService, 
             $location, localStorageService) { 
        $scope.signupUser=function signupUser() {
        alert("hello");
    }]);

The button is not calling signupUser function in my controller

Answer 1

Use $scope.signupUser instead of this.signupUser

Change you code as

 someAppControllers.controller('signupCtrl', ['$window', '$scope',
    function ($window, $scope) { // Here you have to define function an pass window and scope
        $scope.signupUser = function signupUser() {
            alert("hello");
        };
    }
 ]);

Additionally, You have syntax error.

HTML

Instead of

<input type="text" ng-model="signupCtrl.firstName">
<button ng-click="signupCtrl.signupUser()">Register</button>

Use

<input type="text" ng-model="firstName">
<button ng-click="signupUser()">Register</button>

Answer 2

You've written your markup as though you used the controller as syntax. To make it work just change your ng-controller="signupCtrl" to ng-controller="signupCtrl as signupCtrl";