File read in angular js

<!DOCTYPE html>
<html ng-app="myapp">

  <head>
    <script data-require="angular.js@1.5.11" data-semver="1.5.11" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script>
    var myapp = angular.module('myapp',[]);
    myapp.controller("myctrl",function($scope){
      $scope.name = 'gaju';
      $scope.showContent = function(content){
        $scope.content = content;
    };
    });
    
    myapp.directive('onReadFile', function ($parse) {
	return {
		restrict: 'A',
        scope: {
            onReadFile : "&"
        },
		link: function(scope, element, attrs) {
			element.on('change', function(e) {
				var reader = new FileReader();
				reader.onload = function(e) {
					scope.$apply(function() {
                       scope.onReadFile({$content:e.target.result});
					});
				};
				reader.readAsText((e.srcElement || e.target).files[0]);
			});
		}
	};
});

    
  </script>
  </head>
  

  <body ng-controller="myctrl">
    <h1>Hello gajender!</h1>
    {{name}}
    <div >
  <h1>Select text file</h1>
    <input type="file" on-read-file="showContent($content)" />
    <div ng-if="content">
        <h2>File content is:</h2>
        <pre>{{ content }}</pre>
    </div>
</div>
  </body>

</html>

// Code goes here

/* Styles go here */

File read in angular