On loaded file + AngularJS

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div ng-controller="MainCtrl" class="container">
  <h1>Select text file</h1>
    <input type="file" on-read-file="showContent($fileContent)" />
    <div ng-if="content">
        <h2>File content is:</h2>
        <pre>{{ content }}</pre>
    </div>
</div>

JavaScript

var myapp = angular.module('myapp', []);

myapp.controller('MainCtrl', function ($scope) {
  $scope.showContent = function($fileContent) {
    $scope.content = $fileContent;
  };
});

myapp.directive('onReadFile', function ($parse) {
  return {
    restrict: 'A',
    scope: false,
    link: function(scope, element, attrs) {
      var fn = $parse(attrs.onReadFile);

      element.on('change', function(onChangeEvent) {
        var reader = new FileReader();

        reader.onload = function(onLoadEvent) {
        console.log('test');
          var buffer = onLoadEvent.target.result;
          var uint8 = new Uint8Array(buffer); // Assuming the binary format should be read in unsigned 8-byte chunks
          // If you're on ES6 or polyfilling
          // var result = Array.from(uint8);
          // Otherwise, good old loop
          var result = [];
          for (var i = 0; i < uint8.length; i++) {
            result.push(uint8[i]);
          }

          scope.$apply(function() {
            fn(scope, {
              $fileContent: result
            });
          });
        };

        reader.readAsArrayBuffer((onChangeEvent.srcElement || onChangeEvent.target).files[0]);
      });
    }
  };
});