title: Simple mixture of JavaScript and AngularJS not displaying file contents from HTML <input type="file"
body: <p>I have seen examples that use directives to enable AngularJS to access the content or properties of a file (for example in Alex Such's <a href="http://jsfiddle.net/alexsuch/6aG4x/" rel="nofollow">fiddle</a> and <a href="http://veamospues.wordpress.com/2014/01/27/reading-files-with-angularjs/" rel="nofollow">blog post</a>) but I would have thought the following simple code would work (it doesn't).</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body ng-app="myapp"&gt;
      &lt;div id="ContainingDiv" ng-controller="MainController as ctrl"&gt;
          &lt;input id="uploadInput" type="file" name="myFiles" onchange="grabFileContent()" /&gt;
          &lt;br /&gt;
          {{ ctrl.content }}
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>var myapp = angular.module('myapp', []);
  
  myapp.controller('MainController', function () {
      this.content = "[Waiting for File]";
      this.showFileContent = function(fileContent){
          this.content = fileContent;
      };
  });
  
  var grabFileContent = function() {
      var files = document.getElementById("uploadInput").files;
      if (files &amp;&amp; files.length &gt; 0) {
          var fileReader = new FileReader();
          fileReader.addEventListener("load", function(event) {
              var controller = angular.element(document.getElementById('ContainingDiv')).scope().ctrl;
              controller.showFileContent(event.target.result);
          });
          fileReader.readAsText(files[0]);
      }
  };
  </code></pre>
  
  <p>If I place a breakpoint on the line <code>this.content = fileContent</code> I can see that the value of <code>content</code> changes from "[Waiting for File]" and is replaced by the content of the chosen txt file (in my case "Hallo World"). A breakpoint on <code>controller.showFileContent(event.target.result)</code> shows the same, the value changes from "[Waiting for File]" to "Hallo World".</p>
  
  <p>But the HTML never re-renders, it stays as "[Waiting for File]". Why?</p>
  
  <p>(N.B. I've put the code in <a href="http://jsfiddle.net/dumbledad/c54yk17t/" rel="nofollow">a fiddle</a>.)</p>