Angular.js - Jade, Form Submission

Question

I'm new to Angular and I'm building my first realtime page based on the boiler plate from:

https://github.com/jimakker/angular-express-bootstrap-seed

I'm not able to get my first form to submit. In fact, nothing happens when I click the button. Given below are the relevant snippets from the code:

Partial View:

.row
form(ng-controller='RegisterCtrl')
    #accordion.panel-group
           //- Panel 1
           .panel.panel-default
            .panel-heading
                h4(class='panel-title')
                    a(data-target='#collapse1', data-toggle="collapse", data-parent="#accordion", class="left-m-1em cursor-pointer") Basic Information
            #collapse1.panel-collapse.collapse
                .panel-body
                    .row
                        .col-lg-2(ng-controller='DropdownCtrl')
                            select(id="gender", ng-model='register.gender', ng-init="getValues('gender')", ng-options='r.value for r in results track by r.key', chosen, class="form-control", data-placeholder="Gender", data-toggle="tooltip", data-trigger="hover", data-placement="top", title="Gender")
                                option(value="") 

//- More panels in between and finally, Panel 6
           .panel.panel-default
            .panel-heading
                h4(class='panel-title')
                    a(data-target='#collapse6', data-toggle="collapse", data-parent="#accordion", class="left-m-1em cursor-pointer") Family
            #collapse6.panel-collapse.collapse
                .panel-body
                    .row
                        .col-lg-3.col-lg-offset-5
                            button(type="button", class="btn btn-success btn-lg", ng-click="saveProfile")
                                span(class="glyphicon glyphicon-ok-circle") 
                                | Submit

I looked at the rendered output and confirmed that the Submit button is indeed within the form tag.

Controller:

function RegisterCtrl($scope, $http) {
$scope.register = {};
$scope.saveProfile = function(item, event) {
    alert("called this!");
    var json = {
        gender: $scope.register.gender,
        marital_status: $scope.register.marital_status,
        dob: $scope.register.dob,
        height: $scope.register.height,
        weight: $scope.register.weight,
        complexion: $scope.register.complexion,
        health: $scope.register.health
    };

    var responsePromise = $http.post("/api/register", json, {});
    responsePromise.success(function(dataFromServer, status, headers, config) {
        console.log(dataFromServer.title);
    });
    responsePromise.error(function(data, status, headers, config) {
        alert("Submitting form failed!");
    });

};
}
RegisterCtrl.$inject = ['$scope', '$http'];

I'm not even hitting the first alert statement and I'm totally unsure why. The other controller DropdownCtrl (used for individual form elements) works just fine and I'm able to populate the values dynamically using the controller. Please help me find the missing piece.

Answer 1

The syntax is ng-click="saveProfile()" rather than ng-click="saveProfile"

Note also that this won't pass any arguments to the function, if you want to do that then you need to pass them inside the markup too.

Answer 2

Found the problem. Had some stray code in the controller file that read:

` function MyCtrl2() { } MyCtrl2.$inject = [];

 function RegisterCtrl() {
 }
 RegisterCtrl.inject = [];`

And since this was in the file after the actual definition, it messed up the functionality.