title: How to clear a file input from Angular JS
body: <p>In AngularJS, I'm using the approach described here to handle input type=file.</p>
  
  <ul>
  <li><a href="https://groups.google.com/forum/?fromgroups=#!topic/angular/-OpgmLjFR_U">https://groups.google.com/forum/?fromgroups=#!topic/angular/-OpgmLjFR_U</a></li>
  <li><a href="http://jsfiddle.net/marcenuc/ADukg/89/">http://jsfiddle.net/marcenuc/ADukg/89/</a></li>
  </ul>
  
  <p>Markup:</p>
  
  <pre><code>&lt;div ng-controller="MyCtrl"&gt;
      &lt;input type="file" onchange="angular.element(this).scope().setFile(this)"&gt;
      {{theFile.name}}
  &lt;/div&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>var myApp = angular.module('myApp', []);
  
  myApp.controller('MyCtrl', function($scope) {
      $scope.setFile = function(element) {
          $scope.$apply(function($scope) {
              $scope.theFile = element.files[0];
          });
      };
  });
  </code></pre>
  
  <p>As mentioned it's a bit of a hack, but it mostly works for my purposes.  What I need however is a way to clear the file input after the upload has finished - ie: from the controller.</p>
  
  <p>I could completely hack it and use jQuery or something to find the input element and clear it, but was hoping for something a little more elegant.</p>