I am trying to create a file upload component, and display the text file contents in a textarea in the browser for editing before processing.

My inputs looks like this

<input type="file" process-file/>
<textarea id="file-text"

I have a directive that correctly reads the file contents

app.directive('processFile', [function () {
    return {
        link: function (scope, element, attrs) {
            element.on('change', function  (evt) {
                var files = evt.target.files;

                var reader = new FileReader();
                reader.onload = function(e) {
                    var text = e.target.result
                    console.log(text); // contents are correctly displayed
                    scope.fileContent = text;  // this does not work
                    $scope.fileContent = text; // nor does this
                    $("#file-text").text(text) // or this


I need to inject the file content into that textarea but all attempts seem to fail. How can I do that?