Show input file name in DOM using AngularJS - angularjs

Question

I am trying to show the input file name in a readonly text box.
As can be seen this is different from the custom input file of HTML.
So, I tried this.
<input type="text" readonly ng-model="name">.
<input style="display: none" id="upload" type="file" accept=".csv" onchange="angular.element(this).scope().fileNameChange(this)">
<button type="button" ng-click="clickUpload()">Browse</button>
$scope.fileNameChange = function(e) {
$scope.name=e.files[0].name
}
$scope.clickUpload = function(){
angular.element('#upload').trigger('click');
};
With this logic, say I first select 'inputFile1.csv', nothing is shown in the textbox.
Then I select another file 'inputFile2.csv', now 'inputFile1.csv' is shown in textbox.
Where am I going wrong? Also, is this the best way to implement this functionality?

Answer 1

Try this:
<input type="text" readonly ng-model="name">.
<input style="display: none" id="upload" type="file" accept=".csv" onchange="angular.element(this).scope().fileNameChange(this)">
<button type="button" ng-click="clickUpload()">Browse</button>
$scope.fileNameChange = function(e) {
// let the DOM process before letting angular do its thing
$timeout(function() {
$scope.name=e.files[0].name
});
}
$scope.clickUpload = function(){
angular.element('#upload').trigger('click');
};