With angularjs, how do I fire a change event for a file upload directive?

With angularjs, how do I fire a change event for a file upload directive?

I have a fileUpload directive that displays the currently selected filename:
app.directive('fileUpload', function () {
return {
scope: true,
link: function (scope, el, attrs) {
el.bind('change', function (event) {
var files = event.target.files;
for (var i = 0;i<files.length;i++) {
scope.$emit("fileSelected", { file: files[i] });
}
});
}
};
});
Here is the html:
<input id="pdDocument" type="file" file-upload>
I have a cancel button on the form that does this:
$scope.files = [];
The files object gets cleared but the filename still displays on the page
next to the Choose File button. How can I get the filename to clear out so
it doesn't display when $scope.files is cleared? I feel like I need to
trigger the change event for the file input directive but not sure how to
do that.