title: Call server synchronously with AngularJS before form submit
body: <p>I'm integrating my AngularJS app with a payment gateway that requires a form to be submitted to kick-off the process to collect the users credit card details.</p>
  
  <p>The flow is as follows:</p>
  
  <ol>
  <li>User fills in information in an HTML form.</li>
  <li>User clicks submit button.</li>
  <li>onsubmit JavaScript calls an AngularJS controller function that calls my server via $http and gets some information back.</li>
  <li>This information is used to populate hidden fields in the form.</li>
  <li>The form is submitted to the payment gateway site and the user enters their credit card details on that site.</li>
  </ol>
  
  <p>For this process to work, I need the call to my server to return before I return true or false from onsubmit and allow the form to be submitted. </p>
  
  <p>All the examples using promises ($q) ultimately lead to code that uses callbacks. How do I achieve the above flow with a synchronous call, or is there another way to achieve what I require?</p>
  
  <pre><code>function allowSubmit() {
          var scope = angular.element(document.querySelector( '#bookingForm' )).scope();
  
          try {
              var success = scope.createPayment();//createPayment is a method on my controller I need to synchronously call my backend with
              return success;
          } catch (e) {
          //log/alert
              return false;
          }
  }
  
  
  &lt;form id="bookingForm" name="bookingForm" novalidate action=" https://www.example.com/xyz/process.trans" method="POST" onsubmit="return allowSubmit();" &gt;
  ...
  &lt;button type="submit" class="btn btn-success btn-lg pull-right"&gt;Payment&lt;/button&gt;
  ...
  &lt;/form&gt;
  </code></pre>