AngularJS with Ajax Form submission needing to click twice

Question

I am needing to do the following activities from my HTML page:

1. User enters email and password to register
2. Form is sent to Controller when user clicks

Answer 1

Your actual problem is jquery AJAX usage. Normaly when a AJAX call is being made by angular $http it calls a scope.digest cycle internally while ajax response found. But here you are calling jquery ajax so angular is not able to digest the changes so binding is not working.

Try the following after just before complete method finished.

$scope.$apply();

As follows

complete: function(response) {
              console.log(response.responseText);
              if(response.responseText == 'success'){
                console.log('Registration Success');
                   alert('Success');
                   $scope.msgalert='Registration Success, Proceed to Login and Continue';

              }
              else if(response.responseText == 'fail'){
                alert('registration failed');
                $scope.msgalert='Registration Failed, Please try again';

              }
              $scope.$apply();
 }

But it is better to use $http because it call $scope.$apply() internally.