title: HTML5 File upload with AngularJS
body: <p>I'm trying to get angular to read the contents of a file that the user selects through an <code>&lt;input type="file"</code> control. Even though angular does not have directives for file upload controls, it should be easy to fix that with a call to <code>$apply</code>:</p>
  
  <pre><code>function MyController($scope) {
    $('#myFile').on('change', function() {
      var that = this;
      $scope.$apply(function() { $scope.files = that.files });
    });
  }
  </code></pre>
  
  <p>Unfortunately, the event is never fired. It's like the selector is unable to refer to the correct DOM element: even though the selector finds the element, the list of files is always empty. This also happens if i poke around with the js console. The DOM inspector instead has the file list among its properties.</p>
  
  <p>It's driving me crazy, but the only way I've got it to work so far is to use an inline event handler that assigns to a global variable. Why is the jquery selector returning another item? Is there some template compilation mumbo-jumbo that angular does which confuses selectors? </p>