title: AngularJS with Ajax Form submission needing to click twice
body: <p>I am needing to do the following activities from my HTML page:</p>
  
  <ol>
  <li>User enters email and password to register</li>
  <li>Form is sent to Controller when user clicks <code>Submit</code></li>
  <li>Control uses AJAX to create JSON request to RESTful Server and the
  server responds accordingly.</li>
  <li>According to Server's response, User should get alert window, and a
  message printed on the current page (<code>register.html</code>) below "Submit".
  If it is a "Success - Registered " or "Failed - Could not
  register".</li>
  </ol>
  
  <p>But, currently it is working like this: 1), 2), 3) working as expected.</p>
  
  <ol start="4">
  <li><p>The user gets the alert window on first clicking <code>Submit</code> with the appropriate message.</p></li>
  <li><p>The user gets the message printed ONLY ON CLICKING <code>Submit</code> <strong>AGAIN</strong>, but once again, this is showing the alert window.</p></li>
  </ol>
  
  <p>If I remove <code>alert('Something')</code> from JS, I have to click twice for the message to print on the <code>register.html</code></p>
  
  <p>Also, I want to bring it to your attention that clicking twice is also making server call twice. It behaves as if it has paused after the server call, and then to print the message I am supposed to click on Submit.</p>
  
  <p><code>register.html</code></p>
  
  <pre><code>&lt;div class='container'&gt;
      &lt;div class='col-md-12'&gt;
          &lt;div class='fill' ng-controller="registerController"&gt;
              &lt;form name="userForm" ng-submit="submitForm(userForm.$valid,user)" novalidate&gt;
                  &lt;!-- ALL FORM ELEMENTS HERE --&gt;
                  &lt;button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid" ng-click="showme=true"&gt;
                      Submit
                  &lt;/button&gt;
                  &lt;div class="wrapper"&gt;
                      &lt;h3 ng-show="showme"&gt;&lt;em&gt;{{msgalert}}&lt;/em&gt;&lt;/h3&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My JS Controller looks like this <code>stackoverflow_q3.js</code></p>
  
  <pre><code>// create angular controller
  var register = angular.module('Main-app');
  register.controller('registerController', function ($scope, $http, $location) {
  
      // function to submit the form after all validation has occurred            
      $scope.submitForm = function (isValid, user) {
          console.log('Stackoverflow JS func caled');
          var regData = {
              "email": user.email,
              "password": user.password1
          };
  
          var jsonData = JSON.stringify(regData);
          var request = $.ajax({
              url: 'myurl',
              type: 'POST',
              data: jsonData,
              headers: {
                  'Accept': 'application/json',
                  'Content-Type': 'application/json'
              },
              dataType: 'json',
              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';
                  }
              }
          });
      };
  });
  </code></pre>
  
  <p>Also in <code>index.html</code> I have mentioned the controller:</p>
  
  <pre><code>&lt;!-- HTML --&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html ng-app="Main-app"&gt;
  &lt;!--  Controllers  --&gt;
  &lt;script src="js/controllers/stackoverflow_q3.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;!-- Other elements --&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Any idea how can I do all these activities in just one "Submit" click?</p>