Untitled

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-app="myApp">
  <div ng-controller="myCtrl">
    <div>
      <div style="padding-right:60px">
        <input id="xlf" ng-model="filename" valid-file name="xlfile" ng-change="fileLoadTest(filename)" required type="file" />
      </div>
      <div>
        <input type="button" ng-disabled="fileUploaded" class="btn btn-default" ng-click="onFileLoad()" value="Load Data" />
      </div>
      {{count}}
    </div>
  </div>

  <script>
    var app = angular.module('myApp', [])
      .controller('myCtrl', ['$scope', function($scope) {
        $scope.count = 0;
        $scope.fileUploaded = true;
        $scope.fileLoadTest = function(fn) {
          if (fn == '' || !fn) {
            $scope.fileUploaded = true;
          } else {
            $scope.fileUploaded = false;
          }
        }
        $scope.onFileLoad = function() {
          $scope.count++;
          //angular.element("input[type='file']").val(null);
          $scope.fileUploaded = true;
        };

      }]);

    app.directive('validFile', function() {
      return {
        require: 'ngModel',
        link: function(scope, el, attrs, ngModel) {
          el.bind('change', function() {
            scope.$apply(function() {
              ngModel.$setViewValue(el.val());
              ngModel.$render();
            });
          });
        }
      }
    });
  </script>
</body>
</html>

/* Styles go here */