Angular: How to keep $scope properties in sync with controller functions?

Question

I have a controller like so:

angular.module('myApp')
  .controller('MyCtrl', function ($scope, items, UserFactory) {
    $scope.items = items;
    $scope.changeItems = function (item) {
      // Do something with items, in the UserFactory
      UserFactory.removeItem(items);
    }
  }

Where items is returned by a resolve in the routeProvider.

If UserFactory.removeItem operates on something like cookies or localStorage, or changes something on a model, what is the best way to also update $scope.items

Should I have the UserFactory.removeItem return the new items, or should I do something directly in the $scope.changeItems function?

Answer 1

Have you tried observing the changes and doing a callback? Here is a good example how to use them https://stackoverflow.com/a/17558885/5136207

So every time the value in the service is changed you can call the observer function which will lunch a callback to the controllers that are registered and update the values for them.