title: Angular JS emptying form input field from controller when using ng-model
body: <p>I have a really simple form with a couple of input fields. Here's one:</p>
  
  <pre><code>            &lt;label class="item item-input item-stacked-label"&gt;
                  &lt;span class="input-label"&gt;First Name&lt;/span&gt;
                  &lt;input type="text" ng-model="signInData.firstName" placeholder=""&gt;
              &lt;/label&gt;
  </code></pre>
  
  <p>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.. </p>
  
  <p>Here's my controller code where I'm attempting to empty:</p>
  
  <pre><code>        $scope.signInData.firstName = '';
  </code></pre>
  
  <p>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. </p>
  
  <p>I've Googled for a while and seen things like the $setPristine method etc, but none of this is working either.</p>
  
  <p>EDIT</p>
  
  <pre><code>    $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;
        }
      }
  </code></pre>
  
  <p>EDIT - the form</p>
  
  <pre><code>    &lt;form ng-submit="signIn(signInData)" id="signInForm" name="signInForm"&gt;
          &lt;div ng-bind-html="errorSignIn" class="center error"&gt;&lt;/div&gt;
          &lt;div class="list"&gt;
              &lt;label class="item item-input item-stacked-label"&gt;
                  &lt;span class="input-label"&gt;First Name&lt;/span&gt;
                  &lt;input type="text" ng-model="signInData.firstName" placeholder=""&gt;
              &lt;/label&gt;
  
              &lt;label class="item"&gt;
                &lt;button class="button button-full button" type="submit"&gt;Sign in&lt;/button&gt;
              &lt;/label&gt;
           &lt;/div&gt;
       &lt;/form&gt;
  </code></pre>
  
  <p>EDIT 3 - UPDATED HTTP CALL</p>
  
  <pre><code>    $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;
        }
  
      }
  </code></pre>