Angularjs model does not render when change in DWR call back

Question

I have a problem when try to change 'model' in DWR call back.

function mainCtrl($scope) {
     $scope.mymodel = "x";  // this is ok
     DWRService.searchForSomething(function(result){
           $scope.mymodel = result; // PROBLEM!!! it does not rerender the new value
     }
     $scope.mymodel = "y";  // this is also ok.
}

Anyone has any ideas?

Answer 1

I'm not super familiar with DWR, but my guess is that you need an $scope.$apply to enclose your model change. Like so:

function mainCtrl($scope) {
   $scope.mymodel = "x";  // this is ok
   DWRService.searchForSomething(function(result){
       $scope.$apply(function() {
            $scope.mymodel = result; // PROBLEM!!! it does not rerender the new value
       });
   });
   $scope.mymodel = "y";  // this is also ok.
}

Answer 2

just to clarify urban_racoons answer: DWR makes an Asynchronous call to the server. So the result is also received asynchronously.

Asynchronous change in model is not detected by AngularJs (reference here). To make the change effective you have to call $scope.apply() (as done by urban_racoons).

Another way to write above code is:

function mainCtrl($scope) {
     $scope.mymodel = "x";  // this is ok
     DWRService.searchForSomething(function(result){
           $scope.mymodel = result; // PROBLEM!!! it does not rerender the new value
           $scope.apply();
     }
     $scope.mymodel = "y";  // this is also ok.
}