How do I reset a form in angularjs?

See Fiddle: http://jsfiddle.net/hejado/7bqjqc2w/

I'm trying to form.reset() my form using angular.

HTML:

<div ng-controller="formCtrl">
<form name="resetme" id="resetme">
    <input ng-model="text" type="text" />
    <input file-model="file" type="file" />
    <button type="button" ng-click="resetForm()">reset</button>
</form>
</div>

JS:

.controller('formCtrl', function($scope) {
    $scope.resetForm = function() {
    //$scope.resetme.reset();
    document.getElementById('resetme').reset();
    };
});

Please note: I'm using this kind of form to ajax-upload a file. The page is not refreshing and I don't want to use any reset-buttons. (I'm using one in the fiddle for simplicity.) I want to call the reset-function after the fileupload is finished (via http success).

I'm using

<input type="file" />

so I can't reassign empty values to all my inputs, because file inputs are readonly.

Calling the reset() function on the DOM element works, but I was told talking to the DOM in angular would be evil, so...

I'd like to know, how this would be done the angular way. I tried naming the form and referencing it via $scope.formname but I'm not able to call Web API functions... (commented line)

How can I achieve this?

UPDATE After reading some of the answers, I should make clear, that I am using ngModel and a custom directive fileModel to get a hold of the file-object.

Some of the solutions worked in resetting the value of the input field, but the model is not cleared (neither file, nor text). Custom directives are the answer to that, but this kinda exceeds the scope of this question.

Solution

I wrote about this topic a couple years ago. I don't know if the Angular team has yet implemented a native form reset directive but you can do so yourself. There are a couple caveats to this implementation: it only works for one model (if you need to support more see the followup post) and the issue of when to initialize the original values. Also, I never tested this with file inputs so I am not sure it would work with those.

There was an issue for this but it was closed due to inactivity. :/

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', ['$scope',
  function($scope) {
    $scope.myModel = {
      foo: 'Boop',
      bar: 'Beep'
    };
    $scope.myModelCopy = angular.copy($scope.myModel);
  }
]);

myApp.directive('resetDirective', ['$parse',
  function($parse) {
    return function(scope, element, attr) {
      var fn = $parse(attr.resetDirective);
      var masterModel = angular.copy(fn(scope));

      // Error check to see if expression returned a model
      if (!fn.assign) {
        throw Error('Expression is required to be a model: ' + attr.resetDirective);
      }

      element.bind('reset', function(event) {
        scope.$apply(function() {
          fn.assign(scope, angular.copy(masterModel));
          scope.form.$setPristine();
        });

        // TODO: memoize prevention method
        if (event.preventDefault) {
          return event.preventDefault();
        } else {
          return false;
        }
      });
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
  <div ng-controller="MyCtrl">
    <form reset-directive="myModel" name="form">
      <input type="text" ng-model="myModel.foo" />
      <input type="text" ng-model="myModel.bar" />
      <input type="reset" value="Reset" />
      <pre>myModel: {{ myModel | json }}</pre>
      <pre>myModelCopy: {{ myModelCopy | json }}</pre>
      <pre>form pristine: {{ form.$pristine }}</pre>
    </form>
  </div>
</body>