How to submit a second form only after other form is successfully submitted

Question

I am using Angular with UI Router and Firebase. There are two forms in two separate states on a single page: a contact form and a credit card form.

When the user clicks submit, the credit card info is submitted to Stripe. The contact form is then submitted to Firebase, but only after the credit card transaction has successfully completed. The following code works in development. But when the code is minified, the contact form is never submitted.

Any thoughts on what I'm doing wrong?

Controller for contact form:

.controller('ContactFormCtrl', ['$scope', 'Contacts', 'serviceB',  function ($scope, Contacts, serviceB) {
  var contactForm = this;
  var stripeDone = serviceB.get();
  contactForm.contact = {};
  contactForm.contacts = Contacts;

  $scope.$watch(serviceB.get, function(stripeDone) {
    if (stripeDone === 'yes') {
      console.log(contactForm.contact);
      Contacts.$add(contactForm.contact)
 } else {
      console.log('Card not charged');
       }
 }])

Controller for credit card form:

.controller('PaymentFormCtrl', ['$scope', '$http', 'serviceB', function ($scope, $http, serviceB) {

    $scope.handleStripe = function (status, response) {

    var stripeDone='yes';

        return $http.post(http://localhost:9000/api/payments, JSON.stringify(response))
       .then(function() {
         serviceB.set(stripeDone);console.log('serviceB set now',stripeDone);})
       .then(function() {$scope.payment={};
       })
       .then(function() {$state.go('thankyou');})
}]);

ServiceB service:

(function() {

  'use strict';
   angular.module('App')

  // ServiceB confirms that credit card info was submitted to Stripe
    .service('serviceB', serviceB);

    function serviceB () {

        var status = null;
        return {
           get: function () {
              return status;
      },
           set: function (value) {
              status = value;
    }
   };
   }
  })();

Contacts factory:

(function() {
  'use strict';

  angular.module('contacts.fact', [])

  .factory('Contacts', ['$firebaseArray', '$q', 'FBURL', 'Auth', 'Ref', function ($firebaseArray, $q, FBURL, Auth, Ref) {

      var authData = Ref.getAuth();
      var ref = new Firebase(FBURL + '/contacts/' + authData.uid);
      return $firebaseArray(ref);
    }]);
})();

Router info:

.state('payment.details', {
      url: '/details',
      views: {

         'top': {
            templateUrl: 'app/views/contact-form.html',
            controller: 'ContactFormCtrl as contactForm'

       },
         'bottom': {

            templateUrl: 'app/views/credit-card.html',
            controller: 'PaymentFormCtrl'
    // Note: not using controllerAs syntax because Angular Payments module does not support it
    },
     }
 })

UPDATE: If I move .then(function() {$state.go('thankyou');}) from the controller for the credit card form, and place it at the end of Contacts.$add(contactForm.contact) in the controller for the contact form, everything works fine. This resolves the problem, but I'm skeptical that it's the correct solution. Any thoughts?

Answer 1

My suspect is that the watched expression: serviceB.get is messed up when the code is minified

$scope.$watch(serviceB.get

And also the idea of watching for change from service seems very awkward to me. Why don't you let credit controller to broadcast an event once it finishes processing and contact controller can listen to that event?

In credit controller, after receiving response from post request

function {
   serviceB.set(stripeDone);
   $rootScope.$broadcast("stripeDone");
   console.log('serviceB set now',stripeDone);
}

In contact controller:

$scope.$on("stripDone", function() {
    //process
});