angularjs - Sharing data between controllers through service -

i have 2 controllers [firstcontroller,secondcontroller] sharing 2 arrays of data (myfilelist,dummylist) through service called filecomm. there 1 attribute directive filesread isolated scope bound file input in order array of files it. my problem myfilelist array in service never gets updated when select files input. however, dummylist array gets updated in second div (inner2). know why happening? reason in second ngrepeat when switch (fi in secondctrl.dummylist) (fi in secondctrl.myfilelist) stops working. appreciated.

markup

<div ng-app="myapp" id="outer"> <div id="inner1" ng-controller="firstcontroller firstctrl"> <input type="file" id="txtfile" name="txtfile"  maxlength="5" multiple accept=".csv"  filesread="firstctrl.myfilelist" update-data="firstctrl.updatedata(firstctrl.myfilelist)"/>     <div>         <ul>             <li ng-repeat="item in firstctrl.myfilelist">                 <fileuploadrow my-file="item"></fileuploadrow>             </li>        </ul>     </div>     <button  id="btnupload" ng-click="firstctrl.uploadfiles()"      ng-disabled="firstctrl.disableupload()">upload      </button>      </div>     <div id="inner2" ng-controller="secondcontroller secondctrl">         <ul ng-repeat="fi in secondctrl.dummylist">             <li>hello</li>         </ul>         </div>     </div> 

js

angular.module('myapp', []) .controller('firstcontroller', ['$scope','filecomm',function ($scope,filecomm) {     this.myfilelist = filecomm.myfilelist;       this.disableupload = function () {     if (this.myfilelist) {         return (this.myfilelist.length === 0);     }     return false; };      this.uploadfiles = function () {         var numfiles = this.myfilelist.length;         var numdummies = this.dummylist.length;         filecomm.adddummy('dummy no' + numdummies + 1);         console.log('files uploaded when clicked:' + numfiles);         console.log('dummy now:'+ this.dummylist.length);         };      this.updatedata = function(newdata){         filecomm.updatedata(newdata);         console.log('updated data first controller:' + newdata.length);     };      this.dummylist = filecomm.dummylist;      console.log('length @ init:' + this.myfilelist.length); }]) //firstcontroller  .controller('secondcontroller',   ['$scope', 'filecomm', function($scope,filecomm) {     var self = this;     self.myfilelist = filecomm.myfilelist;      self.dummylist = filecomm.dummylist;      console.log('secondcontroller myfilelist - length @ init:' +     self.myfilelist.length);     console.log('progressdialogcontroller dummylist - length @ init:' +      self.dummylist.length); }])  //second controller  .directive('filesread',[function () {     return {         restrict: 'a',         scope: {             filesread: '=',             updatedata: '&'         },         link: function (scope, elm, attrs) {              scope.$watch('filesread',function(newval, oldval){                 console.log('filesread changed length:' +                                scope.filesread.length);          });              scope.datafilechangedfunc = function(){                 scope.updatedata();                 console.log('calling data update directive:' +                    scope.filesread.length);             };              elm.bind('change', function (evt) {                   scope.$apply(function () {                      scope.filesread = evt.target.files;                      console.log(scope.filesread.length);                     console.log(scope.filesread);                    });                  scope.datafilechangedfunc();              });            }     } }])    //filesread directive  .directive('fileuploadrow', function () {     return {         restrict: 'e',         scope: {             myfile: '='         },         template: '{{myfile.name}} - {{myfile.size}} bytes'     };  })  //fileuploadrow directive  .service('filecomm', function filecomm() {     var self = this;;      self.myfilelist = [];      self.dummylist = ["item1", "item2"];      self.updatedata = function(newdata){     self.myfilelist=  newdata;     console.log('service updating data:' + self.myfilelist.length);     };      self.adddummy = function(newdummy){     self.dummylist.push(newdummy);     };  });  //filecomm service 

please see following jsfiddle how test:

select 1 or more .csv file(s) , see each file being listed underneath. each file selected ngrepeat in second div should display hello. not case. change ngrepat in second div secondctrl.dummylist once select file , start clicking upload, see every click new list item added ul. why dummylist gets updated , myfilelist not?

you had couple of issues.

first, in filecomm service updatedata function replacing list instead of updating it.

second, change wasn't updating view immediately, solved adding $rootscope.$apply forced view update.

updated jsfiddle, let me know if isn't looking https://jsfiddle.net/bdeczqc3/76/

.service('filecomm', ["$rootscope" ,function filecomm($rootscope) {     var self = this;     self.myfilelist = [];      self.updatedata = function(newdata){         $rootscope.$apply(function(){             self.myfilelist.length = 0;             self.myfilelist.push.apply(self.myfilelist, newdata);             console.log('service updating data:' + self.myfilelist.length);         });             };      }]);  //filecomm service 

alternately $scope.$apply in updatedata function in firstcontroller instead of doing $rootscope.$apply in filecomm service.

alternate jsfiddle: https://jsfiddle.net/bdeczqc3/77/

this.updatedata = function(newdata){     $scope.$apply(function(){         filecomm.updatedata(newdata);         console.log('updated data first controller:' + newdata.length);     }); };