How do I get my contact form to work with angularJS?

Question

I am trying to integrate AngularJS with my contact form. When I test to see if the validation works or the warning message will fire if the form is empty, it submits, but it appears to just refresh the browser.

This is my HTML:

<form ng-controller="ContactController" ng-submit="submit(contactform)" name="contactform" method="post" action="" class="form-horizontal" role="form" novalidate>

    <div class="form-group uk-form-row" ng-class="{ 'has-error': contactform.inputName.$invalid && submitted }">
    <label for="inputName" class="uk-form-label control-label">Your Name</label>
           <div class="uk-form-controls">
               <input ng-model="formData.inputName" type="text" placeholder="Please enter your name" class=" form-control uk-width-1-1" id="inputName" name="inputName" required>
           </div>
   </div>

    <div class="form-group uk-form-row" ng-class="{ 'has-error': contactform.inputEmail.$invalid && submitted }">
        <label for="inputEmail" class="uk-form-label control-label">Your Email!</label>
             <div class="uk-form-controls">
             <input ng-model="formData.inputEmail" type="email" class="form-control uk-width-1-1" id="inputEmail" name="inputEmail" placeholder="Please enter your email" required>
        </div>
   </div>
   <div class="form-group uk-form-row" ng-class="{ 'has-error': contactform.inputSubject.$invalid && submitted }">
       <label for="inputSubject" class="uk-form-label control-label">Subject</label>
       <div class="uk-form-controls">
        <input ng-model="formData.inputSubject" type="text" class="form-control" id="inputSubject" name="inputSubject" placeholder="Subject Message" required>
       </div>
 </div>
  <div class="form-group uk-form-row" ng-class="{ 'has-error': contactform.inputMessage.$invalid && submitted }">
     <label for="inputMessage" class="uk-form-label control-label">Message</label>
     <div class="uk-form-controls">
     <textarea ng-model="formData.inputMessage" class="form-control" cols="100" rows="9" id="inputMessage" name="inputMessage" placeholder="Your message..." required></textarea>
   </div>
 </div>
 <div class="uk-form-row">
     <div class="uk-form-controls">
           <button class="uk-button uk-button-primary" type="submit" ng-disabled="submitButtonDisabled">Submit</button>
     </div>
 </div>
 <div class="uk-form-row">
    <div class="uk-form-controls">
           <p ng-class="result" style=" font-weight:bold; padding: 15px; margin: 0;">{{ resultMessage }}</p>
   </div>
</div>

This is my JS (angular):

rustyApp.controller('ContactController', function($scope, $http) {
    $scope.result = 'hidden'
    $scope.resultMessage;
    $scope.formData; led = false;
    $scope.submitted = false;
    $scope.submit = function(contactform) {
    $scope.submitted = true;
    $scope.submitButtonDisabled = true;
         if (contactform.$valid) {
        $http({
            method: 'POST',
            url: '../partials/mailer.php',
            data: $.param($scope.formData), //param method from jQuery
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            } 
        }).success(function(data) {
            console.log(data);
            if (data.success) { //success comes from the return json object
                $scope.submitButtonDisabled = true;
                $scope.resultMessage = data.message;
                $scope.result = 'bg-success';
                if ($scope.result === 'bg-success') {
                    $scope.class = "bg-success";
                }
                // if($scope.result){setTimeout(window.location.reload(true),4000);}
                if ($scope.result) {
                    setTimeout(function() {
                        window.location.reload(true)
                    }, 4000);
                }
            } else {
                $scope.submitButtonDisabled = false;
                $scope.resultMessage = data.message;
                $scope.result = 'bg-danger';
            }
        });
    } else {
        $scope.submitButtonDisabled = false;
        if ($scope.submitButtonDisabled) {
            $scope.class = "bg-danger";
        }
        $scope.resultMessage = 'Failed Please fill out all the fields.';
        $scope.result = 'bg-danger';
    }
}
});

UPDATE Dec 15th 7:20pm

This is the error I get now after I followed Sunil's recommendations:

UPDATE Dec 16th 7:12pm

Answer 1

When you want AngularJS to submit the form, you should not use the action attribute on the <form> tag (the method attribute is also not needed). This is mentioned in the documentation for the form directive.

There's a lot of other code there, so I may have missed other things that might be issues. But the presence of the action attribute (I'm assuming even though it is empty) is what is causing the form to be submitted by the browser.