title: ng-disabled not evaluating after data change
body: <p>I am writing an app where the user can upgrade components paying with ingame money. After pressing the "upgrade"-button an ajax request is send to the server and upgrades the component. After that I am issuing another ajax request to retrieve the new components page. But while the data gets updated, ng-disabled is not checked again, so the upgrade-button remains clickable when it should not. Reloading page or route fixes this. But reloading the page is no good user experience.</p>
  
  <p>I am doing this project to learn the Angularjs way, so if there is anything wrong in my setup or how I do something, please tell me!</p>
  
  <p>I try to include all relevant code, if something is missing, you can view it under <a href="http://hackinggame.marv-productions.de/" rel="nofollow noreferrer">this link</a> with user and password "test".</p>
  
  <p>For a headstart, in <code>machine-overview.html</code> the button calls <code>upgradeComponent</code> in <code>controller.js</code> controller <code>MachineOverviewCtrl</code> issuing an Ajax request and on success updating <code>$scope.user</code> and <code>$scope.machine</code>, changed data is reflected in the view (<code>ng-repeat</code>) but the buttons <code>ng-disabled</code> is not evaluated and keeps the old state. </p>
  
  <p>What am I doing wrong? How can I force an evaluation or do the update in a way Angularjs likes it?</p>
  
  <p><strong>edit:</strong></p>
  
  <p>@jack.the.ripper's answer is missing the point, that there are multiple buttons, one for every ng-repeat, but those buttons only don't evaluate their ng-disable directive.</p>
  
  <p><img src="https://i.stack.imgur.com/EaEAE.jpg" alt="example image"></p>
  
  <p><strong>//edit</strong></p>
  
  <h1>index.html</h1>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="de" ng-app="hacksApp"&gt;
      &lt;head&gt;
          &lt;!--ommited includes (angularjs, bootstrap etc)--&gt;
      &lt;/head&gt;
      &lt;body ng-controller="hacksUserCtrl"&gt;
          &lt;!--ommited navbar--&gt;
          &lt;div ng-view&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h1>machine-overview.html</h1>
  
  <pre><code>&lt;!--ommited divs--&gt;
      &lt;table class="table table-bordered"&gt;
          &lt;!--ommited thead--&gt;
          &lt;tbody&gt;
              &lt;tr ng-repeat="component in machine | object2Array | orderBy:'ComponentID'"&gt;&lt;!--converting objects to arrays, issue appears with and without filter--&gt;
                  &lt;!--ommited other irrelevant td--&gt;
                  &lt;td&gt;
                      &lt;button 
                      ng-disabled="
                      {{
                          (component.price_next &lt;= 0) || (component.price_next &gt; user.values.euro) || 
                          (user.values.energy_remaining &lt; (component.energy_next-component.energy)) 
                      }}" 
                      ng-click="upgradeComponent(component)" class="btn btn-danger" role="button"&gt;
                          Upgrade {{component.text}} for &lt;span class="glyphicon glyphicon-euro"&gt;&lt;/span&gt; {{component.price_next}} 
                      &lt;/button&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;!--ommited divs--&gt;
  </code></pre>
  
  <p>javascript vars and their origin:</p>
  
  <pre><code>$scope.user.x //hacksUserCtrl
  $scope.machine.x //MachineOverviewCtrl
  </code></pre>
  
  <h1>app.js</h1>
  
  <pre><code>var hacksApp = angular.module('hacksApp', [
      'ngRoute',
      'hacksControllers',
    'hacksFilters',
      ]);
  
  hacksApp.config(['$routeProvider',
    function($routeProvider) {
      $routeProvider.
        when('/machine', {
          templateUrl: 'html/machine-overview.html',
          controller: 'MachineOverviewCtrl',
          activetab: 'machine'
        }).
        when('/jobs', {
          templateUrl: 'html/jobs-overview.html',
          controller: 'JobsOverviewCtrl',
          activetab: 'jobs'
        }).
        when('/phones/:phoneId', {
          templateUrl: 'html/phone-detail.html',
          controller: 'PhoneDetailCtrl',
          activetab: 'phone'
        }).
        otherwise({
          redirectTo: '/machine'
        });
    }]);
  </code></pre>
  
  <h1>controller.js</h1>
  
  <pre><code>var hacksControllers = angular.module('hacksControllers', ['hacksFilters']);
  
  hacksControllers.controller('hacksUserCtrl', ['$scope', '$http', '$interval', '$route',
    function ($scope, $http, $interval, $route) {
  
      $scope.$route = $route;
  
      $scope.updateUser = function() {
          $http.get('api/user.php').success(function(data) {
            $scope.user = data;
            if(!$scope.user.loggedIn){
              window.location = "index.php";
            }
          });
      }
      $scope.updateUser();
      $interval($scope.updateUser, 60000);
  
    }]);
  
  hacksControllers.controller('MachineOverviewCtrl',  ['$scope', '$http', '$interval',
    function ($scope, $http, $interval) {
  
    $scope.machine = [];
  
      $scope.updateMachine = function() {
          $http.get('api/machine.php').success(function(data) {
            $scope.machine = data;
          });
      }
      $scope.updateMachine();
      $interval($scope.updateMachine, 60000);
  
      $scope.upgradeComponent = function(component){
  
          var params = {name: component.name};
          $http({
              method: 'POST',
              url: 'api/machine-upgrade.php',
              data: $.param(params),
              headers: {'Content-Type': 'application/x-www-form-urlencoded'}
          }).success(function(data) {
            $scope.updateMachine();
            $scope.updateUser();
          });
      }
  
    }]);
  </code></pre>