<input> file is not updating/wroking properly in AngularJs - angularjs

Question

I am trying to write a directive for <input> type file. This directive will handle file change event and I am trying to return following object as a model.
{ fileName: element[0].files[0].name, fileAsBuffer: e.target.result }
My directive code
"use strict";
(function() {
angular
.module("fileUploadApp")
.directive("customFileChange", customFileChange);
customFileChange.$inject = ["$parse"];
function customFileChange($parse) {
return {
restrict: "A",
link: function(scope, element, attrs) {
var model = $parse(attrs.customFileChange);
var modelSetter = model.assign;
element.bind("change", function() {
scope.$apply(function() {
var reader = new FileReader();
reader.onload = function(e) {
var fileModel = {
fileName: element[0].files[0].name,
fileAsBuffer: e.target.result
};
modelSetter(scope, fileModel);
}
reader.onerror = function(e) {
console.log(e.target.error);
}
reader.readAsArrayBuffer(element[0].files[0]);
});
});
}
};
}
})();
My html
<input type="file" name="name" data-custom-file-change="vm.newDocument.attachment" />
<p>{{vm.newDocument.attachment.fileName}}</p>
Problem:
First time when I upload a file, It is not showing anything in
<p>{{vm.newDocument.attachment.fileName}}</p>
Second time if I upload another file, the It is showing the first
file name in <p>{{vm.newDocument.attachment.fileName}}</p>
JS Bin

Answer 1

You need to trigger the digest cycle from inside the callback function itself.
For example:
reader.onload = function (e) {
var fileModel = { fileName: element[0].files[0].name, fileAsBuffer: e.target.result };
scope.$apply(function () {
modelSetter(scope, fileModel);
});
};
Demo: https://jsbin.com/nicocosige/1/edit?html,js,console,output