title: FileReader not loading file properly using AngularJS
body: <p>I'm trying to load a csv file into AngularJS so I can do some manipulation on the contents.  It is not quite working as I want it to.  To test if it is loading properly, I am loading it into a textarea to view the contents.</p>
  
  <p>When I load the file, it says it is loaded properly but the onload() event doesn't seem to be firing until I load a second CSV file, in which case the FIRST file is displayed in the textarea.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
    &lt;input ng-model="csv"
              onchange="angular.element(this).scope().fileChanged()"
              type="file" accept=".csv" id="fileInput"/&gt;
  &lt;/div&gt;
  &lt;br/&gt;
  &lt;div&gt;
    &lt;textarea ng-model="csvFile" readonly="true" style="width:99%; height:500px" disabled&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$scope.fileChanged = function() {
  
    $scope.$apply(function() {
        var csvFileInput = document.getElementById('fileInput');
        var reader = new FileReader();
        var csvFile = csvFileInput.files[0];
        reader.onload = function(e) {
            $scope.csvFile = reader.result;
        };
        reader.readAsText(csvFile);
    });
  };
  </code></pre>
  
  <p>And when I put this into JSFiddle, the file doesn't appear in the textarea at all.  I'm new with JSFiddle so I don't know why that is happening.</p>
  
  <p>Any help at all would be appreciated.</p>