Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="HelloController" >

    <h2>Hello {{helloTo}} !</h2>
    
    <h1>Select file</h1>
        <input type="file" on-read-file="showContent($fileContent)" />
        <div>
            <h2>File content is:</h2>
            <pre>{{ contentfile }}</pre>
        </div>
    
</div>

JavaScript

var myApp = angular.module('myApp',[]);
myApp.controller("HelloController", function($scope) {
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
        $scope.helloTo = "World, AngularJS";
        
        $scope.showContent = function($fileContent){
            $scope.contentfile = $fileContent;
        };
}).directive('onReadFile', function ($parse) {
            return {
                restrict: 'A',
                scope: false,
                link: function(scope, element, attrs) {
                    console.log('asdf');
                    var fn = $parse(attrs.onReadFile);
    
                    element.on('change', function(onChangeEvent) {
    
    
                        var reader = new FileReader();
                        reader.readAsText((onChangeEvent.target).files[0], 'CP1251');
                        reader.onload = function(onLoadEvent) {
                            scope.$apply(function() {
                                fn(scope, {$fileContent:onLoadEvent.target.result});
                            });
                        };
    
    
                    });
                }
            };
        });