angularjs - Refresh controller when factory data updated -

i have factory:

function perioddataservice (apiservice) {      var perioddata = {}      perioddata.refresh = function(user) {         apiservice.query({ route:'period', id: user._id }, function(data) {             perioddata.orders = data[0].orders         })     }     perioddata.orders = []     perioddata.preiod = 1      return perioddata   } angular     .module('app')     .factory('perioddataservice', perioddataservice) 

and controllers...for example one, use factory data

function productionctrl ($scope, perioddataservice) {      $scope.board = perioddataservice.board     $scope.period = perioddataservice.period } angular     .module('loop')     .controller('productionctrl', productionctrl) 

when call refresh, controlles dont update there data. whats reason?

perioddataservice.refresh(user) 

thank you!

the problem that, when call refresh , service does

perioddata.orders = data[0].orders 

your service changing perioddata.orders property point different array 1 set point when initialized (via perioddata.orders = []).

this breaks connection between controller , data array in service because controller set point original array when did

$scope.orders = perioddataservice.orders 

(which don't see in sample code assume you're doing somewhere).

this set $scope.orders equal same pointer perioddata.orders, pointing original array in memory, , allowing controller see changes array.

when service changes perioddata.orders different pointer, nothing changes pointer value of $scope.orders, it's still pointing original array, hasn't changed.

there different ways can fix this.

approach 1

you have service .push() new data perioddata.orders rather set perioddata.orders equal returned data array. refresh method this:

perioddata.refresh = function(user) {     apiservice.query({ route:'period', id: user._id }, function(data) {         perioddata.orders.length = 0; // empty current orders array          // push returned orders data orders array         data[0].orders.foreach(function (item, index) {             perioddata.orders.push(item);         });     }); }; 

as long add or remove original array, , don't redefine (don't ever perioddata.orders =), should work fine.

approach 2

alternatively, create new object hold orders array (and other data elements want expose) , have $scope property pointing object rather array itself.

so service this:

function perioddataservice (apiservice) {     var perioddatasvc = {};      // create data object hold service data     perioddatasvc.perioddata = {         orders: [],         period: 1     };      perioddatasvc.refresh = function(user) {         apiservice.query({ route:'period', id: user._id }, function(data) {             perioddatasvc.perioddata.orders = data[0].orders         })     }      return perioddatasvc; } 

with orders array 1 level deeper @ perioddatasvc.perioddata.orders.

and have $scope property pointing perioddata object rather orders array:

function productionctrl($scope, perioddataservice) {     $scope.perioddata = perioddataservice.perioddata; } 

so in service, when set orders array equal returned array apiservice, controller see change because it's watching perioddata object, , property on object has changed.

and of course, since changed $scope property, markup referencing orders array need change reference perioddata.orders instead. example:

<div ng-repeat="order in perioddata.orders">{{order.id}}: {{order.item}}</div> 

here's fiddle showing both approaches.