Late import of scope that is used in controller of custom directive (Angularjs)

Question

I have a customOnChange directive,

 myApp.directive('customOnChange', function() {
   return {
     scope: true,
     link: function(scope, element, attrs) {
       var onChangeFunc = scope.$eval(attrs.customOnChange);
       element.bind('change', onChangeFunc);
     },
     transclude: true
   };
 })

My controller is using this directive function,

myApp.controller('ControllerCtrl', function($scope) {

  $scope.displayAttachments = false;
  $scope.attachFile = false;
  $scope.files = [];
  $scope.filesName = [];


  $scope.uploadFile = function() {
    $scope.displayAttachments = true;
    var filename = event.target.files[0].name;
    var file = event.target.files[0];
    $scope.files.push(file);
    $scope.filesName.push(file.name);
    console.log(file);
    console.log(file.name);
  };


  $scope.add = function() {
    $scope.attachFile = true;
  };

}

Am using this in my html as,

<div class="panel-body" ng-show="displayAttachments">
  <ul class="list-group">

    <li class="list-group-item" ng-repeat="name in filesName">{{name}}</li>

  </ul>
</div>
<input type="file" id="file" custom-on-change="uploadFile" ng-show="attachFile" />
<button type="button" ng-model="attach" ng-click="add()">Attach</button>

After running this,

• i click on attach, choose file appears
• after choosing a file, the uploadFile is called and $scope.displayAttachments becomes true but still the attachemnts doesnt appear on the browser
• i click on attach and then only file name appears above choose file

I dont know why this behaves like this. Please exaplain and also tell me how to fix this.