AngularJS validation Error after Submitting and data clearing - angularjs

Question

I have implemented validation system in forms and it working fine.
Here is my form:
<form name='addContactForm'>
<div class="form-group">
<label for="userid">USER ID :</label><br>
<input ng-model="formModel.userid" class="form-control" name="userid" restrict-input="{type: 'digitsOnly'}" required>
<span style="color:red" ng-show="addContactForm.userid.$dirty && addContactForm.userid.$invalid">
<span ng-show="addContactForm.userid.$error.required"> User is required.</span>
<span ng-show="addContactForm.userid.$error.number">Invalid userID</span>
</div>
<div class="form-group">
<label for="name">NAME :</label><br>
<input ng-model="formModel.name" class="form-control" name="name" required/>
<span style="color:red" ng-show="addContactForm.name.$dirty && addContactForm.name.$invalid">
<span ng-show="addContactForm.name.$error.required"> Name is required.</span>
<span ng-show="addContactForm.name.$error.lettersOnly">Invalid Name</span>
</span>
</div>
<div class="form-group">
<label for="email">Email :</label> <br>
<input type="email" name="email" class="form-control" ng-model="formModel.email" ng-pattern="/[\w\d\.\_]+\#[\w\d]+\.[\w]{3}/" required>
<span style="color:red" ng-show="addContactForm.email.$dirty && addContactForm.email.$invalid">
<span ng-show="addContactForm.email.$error.required">Email is required.</span>
<span ng-show="addContactForm.email.$error.pattern">Invalid email address.</span>
</span>
</div>
<div class="form-group">
<label for="phone">Phone :</label> <br>
<input ng-model="formModel.phone" class="form-control" name="phone" restrict-input="{type: 'digitsOnly'}" required>
<span style="color:red" ng-show="addContactForm.phone.$dirty && addContactForm.phone.$invalid">
<span ng-show="addContactForm.phone.$error.required"> Phone Number is required.</span>
</span>
</div>
<div class="row justify-content-center">
<button class="btn btn-primary" ng-disabled="addContactForm.$invalid" ng-click="PassDataToDisplyThroughUrl()">Submit</button> <br>
</div>
</form>
</div>
Note that, above things are working fine.
my controller is below:
app.controller('formCtrl', ['$scope', '$location', '$http',
function($scope, $location, $http) {
$scope.formModel = {};
$scope.PassDataToDisplyThroughUrl = function() {
var url = 'display/' + $scope.formModel.userid + '/' + $scope.formModel.name
+ '/' + $scope.formModel.email + '/' + $scope.formModel.phone;
$location.path(url);
$http.post('http://127.0.0.1:8000/api/v1/contact/', $scope.formModel)
.then(function(response){
$scope.successCallBack = 'You have successfully saved your contact';
}, function(response){
$scope.errorCallBack = 'Opps! Unable to save your data, please check your network';
});
$scope.formModel = {};
$scope.addContactForm.$setPristine();
};
}]);
After i clicking on submit button -- it clear the form and send to the server. but the problem is, it shows me the validation error later
Can anyone fix me this issue?