Two way binding doesn't work, need to call $apply to make it work

Question

Two way binding doesn't work, need to call $apply to make it work

Env:

Attempted in Angular1.0.5, 1.1.2

Issue:

My two way binding doesn't immediately update my view and I have to call $scope.$apply after my $scope.is_pic setter in order to see it reflected in the browser.

http://jsfiddle.net/rV4LW/2/

Upload a pic, see that the file input reflects the file name. type into the text box above, which then calls the $digest on the ng-model and magically the browser is now updated to what was in the controller.

if you update the "if" statement to:

if (e.target.result.indexOf('data:image') !== -1) {
        $scope.apc.is_pic = true;
      return $scope.$apply();
    } else {
        $scope.apc.is_pic = false;
      return $scope.$apply();
    }

you'll see it suddenly work. why is this failing for me?

note: the javascript was generated by coffeescript which is why it looks awesome.

angularjs

Answer 1

It's because the model update is done inside a callback, i.e. not in the Angular context. Two way binding only works when model variables are updated inside Angular, otherwise you should explicitly call the $apply method.