button inside directive not being disabled

I have a directive to serve as a credit card form. This form can have many different submit buttons. During the purchase, which is async, I need to make sure that the buttons are disabled. So I'm using a simple observer pattern to accomplish this. The issue I'm having is that when the user clicks a button, the observer pattern is working fine the isolated scope attribute controlling the ng-disable is being set correctly, however the disabled isn't being applied to the buttons. I'm thinking it might be a priority thing?

So heres an observer. The subject is rather mundane. Just validates a form, and has a list of it's observers. Here's where I'm having issues.

.directive('submitCardButton', ['$q', function ($q) {
  return {
    restrict: 'E',
    require: '^createCard',
    scope: {
      successBack: '&',
      buttonVal: '@'
    },
    template: "<button class='button button-pink full-width small-top' ng-class=\"{disabled: submitting}\" ng-click='getCC()' ng-disabled=\"submitting\">{+ submitting +} {+ buttonVal +}</button>",
    link: function (scope, elem, attr, card) {
      card.registerButton(scope);
      scope.submitting = false;

      function getCC () {
        card.disableButtons();
        card.getCC().then(function (response) {
          $q.when(scope.successBack({response:response}))
              .finally(card.enableButtons);
        }, function () {
            card.enableButtons();
        });
      }

      scope.disable = function () {
        scope.submitting = true;
        console.log(scope.submitting);
      };

      scope.enable = function () {
        scope.submitting = false;
        console.log(scope.submitting);
      };

      scope.getCC = getCC;
    } // end link
  };// end return 
}])// end directive

When I debug, inside the getCC, after I call the disableButtons the submitting is set to true. Howerver the submitting inside the template is still false and therefore not disabled. Any help would be soooo much appreciated.

I created a plunkr that demonstrates the issue I'm having. I'm using a simple user first name last name to show the issue. It works fine if you submit properly. However, if you just submit with out putting any data in, you can see that the submitting flag in the button directive is set to True, but the disabled is not being set properly. http://plnkr.co/edit/8KTUCNMPBRAFVl1N4nXp?p=preview

Solution

In your createCard.getCC() the positive case returns an unresolved promise (it is resolved later with a $timeout), so while the promise is unresolved, the submitting property of submitCardButton's scope is "true" and button is disabled.

In the negative case, the promise is rejected right away (synchronously), and so there is no time for the button to be disabled - the promise rejection handler sets submitting immediately to false.

If you want to see the effect, change the negative use case to this:

if (!(user.firstname && user.lastname)) {
  $timeout(function() {
     defer.reject('bad user! bad!');
  }, 5000);
}