title: how to avoid race condition with $http promises angular 1.5
body: <p>I have a situation where I don't want one promise to complete until the other one (or potentially a few others) are complete. in this scenario, I have different payment options, and each time the user clicks a button, a payment is made... while the payments are made the user can also click delete. this is leading to weird race conditions where the delete is processed before the pay finishes. I don't want the delete to process/hit the database until the pay actions are complete. Here is the relevant code: </p>
  
  <pre><code> $ctrl.deletePayment = function(paymentRecord) {
    PaymentsService.deletePaymentRequest($ctrl.paymentRecord.id, paymentRecord)
      .then(updateTotal)
      .catch(updateTotal);
  }
  
  $ctrl.payOff = function(dataItem) {
    let payOffRecords = dataItem.payoffRecords;
    PaymentsService.submitPaymentRequestViaPatch($ctrl.temporaryPaymentAdvice.id, payOffRecords)
      .then(updateTotal)
      .catch(updateTotal);
  }
  
  $ctrl.payAllInView = function(payOff) {
    let paymentRecords = dataSource.map((rowItem) =&gt; {
      return rowItem.payoffRecords;
    });
    if (paymentRecords.length &gt; 0) {
      PaymentsService.submitPaymentRequestViaPatch($ctrl.temporaryPaymentAdvice.id, paymentRecords)
        .then(updateTotal)
        .catch(updateTotal);
    }
  }
  </code></pre>
  
  <p>how can I prevent deletePayment from processing before until a payment action is complete? I was thinking of having a modal show up to block the UI, but was also wondering if there was an angular way to handle this async/race condition.  </p>