title: Resetting File Input with AngularJS
body: <p>I've gone through a lot of tutorials and still fail to understand how to properly handle the situation. Please take a look and help me troubleshoot this. </p>
  
  <p>I submit a form with json file uploaded. Then I want to reset file input field as soon as the button "Submit" is clicked. </p>
  
  <p>The method clearData() sends the request to delete the data from the database whereas I want to clear only file-input field.</p>
  
  <p>Here's a layout of my form:</p>
  
  <pre><code>&lt;form id="json-upload-form" name="jsonUploadForm" enctype="multipart/form-data"&gt;
     &lt;div class="row"&gt;
        &lt;div class="col-md-12 json-upload-file"&gt;
           &lt;div class="fileinput fileinput-new" data-provides="fileinput"&gt;
              &lt;span class="choose-file-label"&gt;Select JSON file&lt;/span&gt;
              &lt;span class="btn btn-default btn-file uui-button"&gt;
              &lt;span class="fileinput-new"&gt;Choose file&lt;/span&gt;
              &lt;span class="fileinput-exists"&gt;Change file&lt;/span&gt;
              &lt;input type="file" name="files" file-model="json.file"/&gt;
              &lt;/span&gt;
              &lt;span class="fileinput-filename" ng-model="filename"&gt;&lt;/span&gt;
              &lt;a href="#" class="close fileinput-exists" data-dismiss="fileinput"&gt;×&lt;/a&gt;
           &lt;/div&gt;
           &lt;button class="uui-button green" id="json-upload-button" ng-click="submit()"&gt;Upload file&lt;/button&gt;
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="row"&gt;
        &lt;div class="col-md-12"&gt;
           &lt;button type="button" class="uui-button green" id="json-clear-button" ng-click="clearData()"&gt;Clear data&lt;/button&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here I have a directive looking into the value of a file:</p>
  
  <pre><code>angular.module('adminSmokeReportsApp')
  .directive('fileModel', [
      '$parse',
      function ($parse) {
          return {
              restrict: 'A',
              link: function (scope, element, attrs) {
                  var model = $parse(attrs.fileModel);
  
                  element.bind('change', function () {
                      model.assign(scope, element[0].files[0]);
                      scope.$apply();
                  });
              }
          }
      }]);
  </code></pre>
  
  <p>Here comes the service that posts the data:</p>
  
  <pre><code>angular.module('adminSmokeReportsApp')
  .service('multipartForm', [
      '$http',
      function ($http) {
          this.post = function (uploadUrl, data) {
              var formData = new FormData();
              formData.append("files", data.file);
  
              $http.post(uploadUrl, formData, {
                  transformRequest: angular.identity,
                  headers: {
                      'Content-Type': undefined
                  }
              });
          }
      }]);
  </code></pre>
  
  <p>Finally the controller that handles the action:</p>
  
  <pre><code>angular.module('adminSmokeReportsApp')
  .controller('JsonUploadCtrl', [
      '$scope',
      'config',
      'multipartForm',
      function ($scope, config, multipartForm) {
          $scope.clearData = function () {
              $.ajax({
                  url: config.clearTestDataUrl,
                  success: function () {
                      alert("All data cleared!");
                  }
              });
          };
  
          $scope.json = {};
  
          $scope.submit = function () {
              var uploadUrl = config.jsonUploadFormUrl;
              multipartForm.post(uploadUrl, $scope.json);
          };
      }]);
  </code></pre>
  
  <p>I've tried an approach where we save the initial state and then operate with angular.copy to make a change. Ultimately, myForm.$setPristine() doesn't seem to do the trick. </p>
  
  <p>I also wanted to invoke val() on an element to set it to null. No success either. Although it does work if I use the function in the directive, but that happens before the moment when upload method is executed. </p>
  
  <p>As you can see, I'm a newbie and I might as well have the solution, but have no idea about the right way of applying it. Thanks!</p>