Angular JS emptying form input field from controller when using ng-model

Question

I have a really simple form with a couple of input fields. Here's one:

            <label class="item item-input item-stacked-label">
                <span class="input-label">First Name</span>
                <input type="text" ng-model="signInData.firstName" placeholder="">
            </label>

When I submit the form and it returns true from the AJAX request, I want to simply empty the input field but it's not working. I may be missing something simple..

Here's my controller code where I'm attempting to empty:

        $scope.signInData.firstName = '';

This is emptying the model from the scope, which I can see because I am console logging the scope object, but it just doesn't empty the value.

I've Googled for a while and seen things like the $setPristine method etc, but none of this is working either.

EDIT

    $http({
      url: 'sign_in_app',
      method: 'POST',
      data: {'firstName': signInData.firstName}
    }).then(function(response) {
      if(response.data.response == 'error'){
        $scope.errorSignIn = 'Sorry, there was an error signing in.';
      }else{
        $scope.errorSignIn = null;
        $scope.signInData.firstName = '';
        $scope.signInForm = null;
      }
    }

EDIT - the form

    <form ng-submit="signIn(signInData)" id="signInForm" name="signInForm">
        <div ng-bind-html="errorSignIn" class="center error"></div>
        <div class="list">
            <label class="item item-input item-stacked-label">
                <span class="input-label">First Name</span>
                <input type="text" ng-model="signInData.firstName" placeholder="">
            </label>

            <label class="item">
              <button class="button button-full button" type="submit">Sign in</button>
            </label>
         </div>
     </form>

EDIT 3 - UPDATED HTTP CALL

    $http({
      url: '/sign_in/sign_in_app',
      method: 'POST',
      data: {'firstName': $scope.signInData.firstName, 'lastName': $scope.signInData.lastName}
    }).then(function(response) {
      if(response.data.response == 'error'){
        $scope.errorSignIn = 'Sorry, there was an error signing in.';
      }else{
        $scope.errorSignIn = null;
        $scope.signInData.firstName = '';
        $scope.signInForm = null;
      }

    }

Answer 1

Try this: remove the signInData from the ng-submit, alter your $scope.signIn() method to no longer need that, use the $scope.signInData object to set all the values for your $http call (which, by the way, should probably be in a service to keep your controller more clean and follow typical Angular design patterns) and then see if you still have the issue where your form inputs are not being cleared.

My suspicion is that because you are passing signInData from that point forward you start operating on a copy of the scope object and that is why clearing properties is not behaving like you are expecting.

Answer 2

$setPristine does not clean up the input fields. You can try using $scope.signInData = {}; after submitting the form