Angular js Update a div without updating the whole page - angularjs

Question

Please i want to update a specific div in my view instead of reloading the whole page.
This is my Script.
$scope.submitComment = function() {
$http({
url: "comment",
method: "POST",
data: $.param($scope.commentData),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function(response) {
console.log(response);
$scope.loading = true;
//location.reload();
$scope.loading = false;
}).error(function(response) {
console.log(response);
alert('Sorry an error occured');
});
};
This is my view
<div ng-controller="myController">
<br> <br> <br> <br>
<form ng-submit="submitComment()" id="form">
<div class="form-group">
<label for="author">Author: </label>
<input id="author" class="form-control " type="text" ng-model="commentData.author" name="author" placeholder="Enter author">
</div>
<div class="form-group">
<label for="message">Message:</label> #{{ commentData.message }}
<textarea id="message" class="form-control" ng-model="commentData.message" name="message" placeholder="Enter Comment" rows="8" cols="40"></textarea>
</div>
<div class="form-group pull-right">
<button type="submit" class="btn btn-primary"><i class="fa fa-comment-o"> Comment</i></button>
<!-- <input class="btn btn-primary" type="submit" value="Comment"> -->
</div>
</form>
<h2>Comments</h2> <hr>
<div ng-repeat="comment in comments">
<div><strong>#{{ comment.author }}</strong></div>
<div>#{{ comment.message }} <button type="button" ng-click="deleteComment(comment.id)" class="btn btn-danger-outline btn-sm" id="submit">Delete</button></div>
<br>
</div>
</div>
I want to update my form so that the text in it goes. and also update my comments as well. I need a help on this please.

Answer 1

In your $scope.submitComment() method, $http.success(), you need to $scope.comments.push($scope.commentData) and you should be good to go.
$scope.submitComment = function() {
$http({
// ...
}).success(function(response) {
$scope.comments.push($scope.commentData);
});
};