Recently, I've started working with angularjs and I'm facing a challenge,
Here's the html code:
<section class="content" ng-app="offer">
<div ng-controller="OfferController">
...
<input name="Attachment" type="file" class="file_up" onchange="angular.element(this).scope().change(this)" ng-model="Attachment" />
<span>{{Attachment}}</span> //unable to retrieve it
...
</div>
</section>
and here's the script:
var myApp = angular.module('offer', []);
myApp.controller('OfferController', ['$scope', function ($scope) {
$scope.change = function (element) {
if (element.files.length > 0) {
$scope.Attachment = element.files[0].name;
}
else {
$scope.Attachment = "";
}
console.log($scope.Attachment); //can see changed value in console
}
}]);
image:
While I can see the changed value in the console, I'm struggling to display it on the html side when the input's value changes. Any help would be greatly appreciated. Thank you.