Muthukannan Kanniappan Muthukannan Kanniappan - 3 months ago 8x
AngularJS Question

input file change listener in a directive doesnt update scope variable [plunker attached]

I have a directive that contains file input. On change of file input I try to update some scope variables, it doesn't update it. When the commented out timeout is uncommented scope variables are updated.

I was under the impression that angular.element .on function does the safe apply (triggering a digest). I am not sure why it requires another $timeout here to work, Could someone shed some light on this behaviour?

Problem reproduced in below plunker.

app.directive('fileInput', function($timeout) {
var directive;

directive = {
restrict: 'E',
templateUrl: 'fileinput.html',
link: function(scope, element) {
.on('change', function(e) {
scope.fileName = 'file name--->' +[0].name;
scope.fileSize = 'fileSize--->' +[0].size;

return directive;

directive template:

<input type="file" id="fileUpload" accept="image/*" />


element.on is either using jqLite or Jquery. So using scope.$apply is valid in this case as element.on is not AngularJs aware