title: Angular - ng-disabled not working after scope change
body: <p>I have an input and a button. I want the button to be disabled when the input is empty or is more than 15 characters long.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;input type="text" id="addCustomer" ng-model="customerNumber"&gt;
  &lt;button id="addSingleCustomerButton" ng-disabled="!isValidSingleInput(customerNumber)" ng-click="addCustomer()"&gt;&lt;/button&gt;
  </code></pre>
  
  <p><strong>isValidSingleInput</strong></p>
  
  <pre><code>$scope.isValidSingleInput = function(input) {
      return (input != undefined &amp;&amp; input.length &gt; 0 &amp;&amp; input.length &lt;= 15);
  }
  </code></pre>
  
  <p><strong>addCustomer</strong></p>
  
  <pre><code>$scope.addCustomer = function() {
      $('#addSingleCustomerButton').button('loading');
  
      // Call service to add customer number to database
      CustomerService.add({}, payload, function(data) {
          $('#addSingleCustomerButton').button('reset');
          $scope.customerNumber = '';
      });
  }
  </code></pre>
  
  <p>At the end of the <code>addCustomer</code> function the input field is cleared by setting the scope with <code>$scope.customerNumber = '';</code>.</p>
  
  <p>However, the button is not disabled again after clearing the input. I added a log to the <code>isValidInput</code> function with the result of it and it returns <code>false</code> after clearing the input. So the function is called and it returns the expected value, but it somehow has no effect on the button's <code>ng-disabled</code>.</p>
  
  <p><strong>EDIT:</strong> Added function <code>addCustomer</code></p>
  
  <p><strong>EDIT2:</strong> Didn't think it would matter, but the problem is caused by Bootstrap's button.js. If I remove the <code>.button('loading')</code> and <code>.button('reset')</code> it's working. In my eyes this should work anyways because I'm resetting the scope after the button.</p>