Traditional Data Service

$watching.js

app.controller('Ctrl1', function($scope, DataFactory) {
  // bind the controller property to the service collection
  this.items = DataFactory.items;
  
  // watch the collection for changes
  $scope.$watch(watchSource, function(current, previous){
    this.items = current;
  });
  
  function watchSource(){
    return DataFactory.items;
  }  
});

app.factory('DataFactory', function($q, $timeout) {
  var svc = {};
  svc.items = [];

  svc.getDataStream = function() {
    
    var fakeData = [
      { id: 1, name: 'name 1' },
      { id: 2, name: 'name 2' },
      { id: 4, name: 'name 4' }
    ];
    
    // using $q to fake async data grab
    return $q.when(fakeData)
      .then(function(data) {
        svc.items = data;
      });
  };

  return svc;
});

blog-ng-list-services1.js

app.controller('Ctrl1', function(DataFactory) {
  // bind the controller property to the service collection
  this.items = DataFactory.items;

  // invoke the call to get data
  DataFactory
    .getDataStream()
    .then(function() {
      // update the controller collection property
      this.items = DataFactory.items;
    }.bind(this));
});

// sample "service" for getting data
app.factory('DataFactory', function($q, $timeout) {
  var svc = {};
  svc.items = [];

  svc.getDataStream = function() {
    
    var fakeData = [
      { id: 1, name: 'name 1' },
      { id: 2, name: 'name 2' },
      { id: 4, name: 'name 4' }
    ];
    
    // using $q to fake async data grab
    return $q.when(fakeData)
      .then(function(data) {
        svc.items = data;
      });
  };

  return svc;
});

blog-ng-list-services2.js

app.controller('Ctrl1', function(DataFactory) {
  // bind the controller property to the service collection
  this.items = DataFactory.items;
 
  // but wouldn't it be so much better
  // to just call it and let it work
  DataFactory.getDataStream();
});

collectionreset.js

svc.getDataStream = function() {
  return $q.when(fakeData)
    .then(function(data) {
      // here we are clearly reseting the data
      // to the response of the call.. Why doesn't
      // it just databind?
      svc.items = data;
    });
};

final_structure.js

var app = angular.module('app', []);

app.controller('Ctrl1', function(DataFactory) {
  this.items = DataFactory.items;

  DataFactory.getDataStream();
});

app.controller('Ctrl2', function($timeout, DataFactory) {
  // when this eventually fires and gets *remote* data again
  // our other controller will automatically sync up
  // without the need for the $watch function
  $timeout(DataFactory.getDataStream, 2000);
});

app.factory('DataFactory', function($q) {
  var svc = {};
  svc.items = [];

  svc.getDataStream = function() {
    
    var fakeData = [
      { id: 1, name: 'name 1' },
      { id: 2, name: 'name 2' },
      { id: 4, name: 'name 4' }
    ];
    
    // using $q to fake async data grab
    return $q.when(fakeData)
      .then(function(data) {
        // this is the magic
        angular.copy(data, svc.items);
      });
  };

  return svc;
});