Angular - Form won't submit

Question

I seem to be overlooking something simple here but it has me stumped.

Why does nothing happen when i hit the submit button?

<section ng-controller="SavingsController as savingsCTRL">
  <form name="createSavingForm" class="form-horizontal" novalidate>
    <fieldset>
      <!-- Title Box Start-->
      <div class="form-group new-deal-form" show-errors>
        <label for="title">Title</label>
        <input name="title" type="text" ng-model="savingsCTRL.title" id="title" class="form-control" placeholder="Title" required>
        <div class="sub-label">Enter the Title of the Deal.</div>
        <div ng-messages="savingForm.savingsCTRL.title.$error" role="alert">
          <p class="help-block error-text" ng-message="required">Saving title is required.</p>
        </div>
      </div>

      <!-- Title Box End-->

      <!--Submit Button Start-->

      <div class="form-group buttons-cancel-submit">
        <button class="btn btn-default " ng-click="savingsCTRL.cancel()">Cancel</button>
        <input type="submit" class="btn btn-success " ng-click="savingsCTRL.create(); submitForm(createSavingForm.$valid)" >
      </div>
    </fieldset>
  </form>
</div>
</div>
</section>

for simplicity i took most of the forms out but what else is wrong?

Savings Controller Function

 // Create new Saving
        $scope.create = function () {
            $scope.error = null;

            alert("create");

            // Create new Saving object
            var saving = new Savings({


                title: this.title,
                details: this.details,
                retailer: this.retailer,
                price: this.price,
                link: this.link,
                image: $scope.user.imageURL,
                urlimage: this.urlimage,
                tags: this.tags
                //startdate: this.startdate,
                //enddate: this.enddate


            });

            // Redirect after save
            saving.$save(function (response) {
                $location.path('savings/' + response._id);

                // Clear form fields
                $scope.title = '';
                $scope.details = '';
                $scope.retailer = '';
                $scope.price = '';
                $scope.link = '';
                $scope.image = '';
                $scope.urlimage = '';
                $scope.tags = '';


            }, function (errorResponse) {
                $scope.error = errorResponse.data.message;
            });
        };

Answer 1

Main issue is, you are mixing controller as syntax with $scope.

According to documentation, we should use this instead of $scope.

... binds methods and properties directly onto the controller using this: ng-controller = "SettingsController1 as settings"

Than, submitForm is not a predefined method, it should be defined in controller first

this.submitForm = function(isValid){
   console.log('Submitting form: ' + isValid)
}

In addition to that, bind that to form with ng-submit= "savingsCTRL.submitForm(createSavingForm.$valid)"

See Plunker, with working code. (I took ng-click="savingsCTRL.create()", since we don't have all parts of your application)

Answer 2

Bind the form submit event to ng-submit.

Example: ng-submit="submitForm(createSavingForm.$valid)"