After selecting files, they does not bind to scope

[Mady007]

I'm able to select files but when I click submit to post them to the server the $scope.files is undefined. The $watch is not triggered when I select files.

Html:
<lf-ng-md-file-input lf-files="files" multiple></lf-ng-md-file-input>

Js:

Module:
angular.module('documentModule', [ 'ngRoute', 'ngMaterial', 'ngAnimate' ,'lfNgMdFileInput' ]);

Controller:

angular.module('documentModule').controller('documentViewModel', documentViewModel); documentViewModel.$inject = ['$scope','$http'];

  function documentViewModel($scope, $http) {
     //$scope.files =[];
      $scope.$watch('files.length', function (newVal, oldVal) {
        console.log($scope.files);
      });
 }

I have read that lf-files="files" acts similar to ng-model ="files" but it does not bind to $scope.

[ipuiu]

Same issue here with angular 1.6.3 and angular-material 1.1.3. $scope.files never gets updated, even if I initialize it with an array.

[zuhrasofyan]

For those who experience similar problem, check if in your parent div that encapsulated the fileinput use ng-if(or if you use ng-if in the fileinput itself). Apparently, it blocks the $scope.files and always return undefined. Try to remove ng-if and see it works as usual. At least that is what happen in my case.