How to update view in angularJS when an object is updated outside of the scope

Question

How to update view in angularJS when an object is updated outside of the scope

I have an object outside the AngularJS scope that looks something like:

obj = { isBig : true, name: "John" ... }

it has many parameters and it was created outside the angular scope and it updates outside of angularJS (for example - via ajax call that I make with jQuery).

inside my controller I write:

$scope.obj = obj;

How do I create an event that listens to any of the object's changes and updates the view ? So the event is the objects's changes

Specifically I have a parameter called obj.isAjaxCallFailed = true/false that I use in the view as <div ng-show="obj.isAjaxCallFailed"></div>

It's not working. I tried using $on and I can't figure out any way to do it.

javascript
html
angularjs

Answer 1

Use $watch() on obj to listen for changes (in your controller):

$scope.$watch(function() {
   return obj;
}, function(value) {
   if(value) {
      $scope.obj = obj;
   }
}, true);

At the place in your code where you create or update obj, you use $rootScope.$apply() to kickoff the watches:

function someCallbackOutsideAngular(data) {
   var $rootScope = angular.injector(['ng']).get('$rootScope');
   $rootScope.$apply(function() {
      obj.someKey = data.someValue;
   });
}

Note: angular.injector(['ng']) should probably set somewhere outside the callback (no need to execute it all the time).