AngularJS : controlling services data with factory

Question

I am trying to 'control' data in a factory from two separate controllers and while the below code works fine, it doesn't always work. For whatever reason it only binds the data about 50% of the time. Is there a way to make sure that the data is being binded all the time and if either controllers make edits to the data that the changes will be reflected on both ends.

Service:

angular.module('service', ['ngResource']).
    factory('Service', function($resource){
        return $resource('/api/data/:id', {id:'@id'}, {});
});

Factory:

angular.module('factory', ['ngResource', 'service']).
    factory('Factory', function($resource, Service) {
        this.mydata = '';
        return {
            getData: function(id){
            return Service.query({id: id});
            },

            data: function(data){
            return this.mydata;
            },

            setData: function(data){
            this.mydata = data;
            }
        }
});

Controller:

$scope.Factory = Factory;
var items = Factory.getData(0);

items.$promise.then(function(itemArr){

    var item = itemArr[0];
    $scope.data = item;

    Factory.setData(item);
});

If there is a better way to do this so that I don't have to set the data in the factory that would be nice. It would also be nice to not have to deal with the promise object in the controller, but I don't think it would be possible to get the data out in the factory.

After setting the data using the above factory I access it in a different controller with the following code:

    var item = Factory.data();
    $scope.selected = [{foo:'bar'},{foo1:'bar1'}];

    angular.forEach($scope.selected, function(value, key){
        item.requirements.push(value);
    })

    Factory.setData(item);

Ultimately I want to be able to access the same changing data from both controllers. The above works, but only some of the time and I'm not sure whats not getting set.

EDIT: I was able to get it to work all the time by using the $scope.$watch functionality in the controller on the call back function. The data is bound, but angular needs to know what to watch for as suggested in the answer below.

Answer 1

To not have to manually set the data in the 'factory' (aka angular service), you can just set it in the callback to the resource:

 return {
            getData: function(id){
              return Service.query({id: id}, function(data){
                myData = data;
              });
            },

If you want to not deal with the promise object, you can send in a callback of your own to the getData function and when it is complete, call the callback you send in in the callback of the resource:

 return {
                getData: function(id, cb){
                  return Service.query({id: id}, function(data){
                    myData = data;
                    if (cb) {cb(data);}
                  });
                },

Which changes the way you call getData to this:

var items = Factory.getData(0, function(itemArr){
    var item = itemArr[0];
    $scope.data = item;
});