Reset form after ng-Submit and suppress ng-messages

I have a form which when I submit, I reinitialise it as the form has been submitted. I then show a message and stay on the same page.

However, the form's fields come up with the error messages as the form has been "touched".

Demonstrated below:

I have read some articles about how to go around this but none are working for me.

My HTML:

<form name="newPost" ng-submit="makeNewPost()">
<div class="form-group">
  <input name="title" maxlength="46" minlength="2" type="text" class="form-control" ng-model="post.title" required="required">
  <div ng-messages="newPost.title.$error" ng-if="newPost.title.$touched">
    <div class="errorMessage" ng-message="required">Title is mandatory *</div>
  </div>
</div>

<input type="submit" value="Submit" class="btn btn-success" id="submit"> 

My controller code to reset the data:

var resetData = function(){
  $scope.post = {};
};

resetData();

Of course there are more fields but to solve the problem, just this simple code will demonstrate it.

Any input will help. Thanks chaps!

Your resetData function should be:

$scope.resetData = function(){
  $scope.post = {};
  $scope.newPost.$setUntouched();
  $scope.newPost.$setPristine();
}

where newPost is form name & $setUntouched, $setPristine will make form pristine just like initially loaded. Call this function in the end of submit function.