AngularjsControllersSharingData

Controllers sharing data

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="myApp" id="outer">
  <div id="inner1" ng-controller="FirstController as 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>
  </div>
    
    <h2>Second Controller</h2>
    <div id="inner2" ng-controller="SecondController as secondCtrl">
        <ul ng-repeat="fi in secondCtrl.myFileList">
            <fileuploadrow my-file="fi"></fileuploadrow>
        </ul>    
    </div>    
</div>

JavaScript

angular.module('myApp', [])
.controller('FirstController',['$scope','filecomm',function ($scope,filecomm) {
    this.myFileList = filecomm.myFileList; 

    this.updateData = function(newData){
        filecomm.updateData(newData);
        console.log('updated data first controller:' + newData.length);
    };
    
    console.log('length at init:' + this.myFileList.length);
}]) //FirstController

.controller('SecondController', ['$scope', 'filecomm', function ($scope,filecomm) {
    var self = this;
    self.myFileList = filecomm.myFileList;   

    console.log('ProgressDialogController myFileList - length at init:' + self.myFileList.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 to length:' + scope.filesread.length);
                
            });
            
            scope.dataFileChangedFunc = function(){
                scope.updateData();
                console.log('calling data update from 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}}...