AngularJS refresh view after send comment - angularjs

Question

I created controller in AngularJS to display and send comment to my rest endpiont. How to refresh comment list after user click and send comment?
My controller:
.controller('CommentController',
function($scope, $routeParams, NewsModel){
var newsId = $routeParams.id;
path = 'getCommetnsByNewsId/'+newsId;
var comm = this;
var data = new Date().toLocaleString();
$scope.createComm = function(comment){
NewsModel.createComment(angular.extend({},
{data: data, newsId: newsId}, comment)).then(function (result){
initCreateComm();
})
}
function initCreateComm(){
comm.newComm = { comment: '', author: ''};
}
NewsModel.getCommentById().then(function (result){
$scope.comments = result.data;
console.log($scope.comments);
});
})
Service:
.service('NewsModel', function($http, ENDPOINT_URI){
var service = this;
function getUrl(){
return ENDPOINT_URI + path;
}
service.all = function(){
return $http.get(getUrl());
}
service.getCommentById = function(){
return $http.get(getUrl());
}
service.createComment = function(comment){
return $http.post(getUrl(),comment);
}
});
And HTML:
<!-- Comments Form -->
<div class="well">
<h4>Leave comment:</h4>
<form role="form" ng-submit="createComm(newComment)">
<div class="form-group">
<input type="text" class="form-control" ng-model="newComment.author" placeholder="Autor">
</div>
<div class="form-group">
<textarea class="form-control" ng-model="newComment.comment" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Wyślij</button>
</form>
</div>
<hr>
<div ng-repeat="comm in comments">
<div class="media">
<div class="media-body">
<h4 class="media-heading">{{comm.author}}
<small>{{comm.data}}</small>
</h4>
{{comm.comment}}
</div>
</div>
</div>
</div>
How to do this?

Answer 1

This is how you get the comments:
NewsModel.getCommentById().then(function (result){
$scope.comments = result.data;
console.log($scope.comments);
});
So you need to wrap it in a function and call it after adding a new comment:
$scope.getComments = function() {
NewsModel.getCommentById().then(function (result){
$scope.comments = result.data;
console.log($scope.comments);
});
};
$scope.getComments(); // Init the comments as the controller loades
And add this at the end of $scope.createComm = function(comment){:
$scope.createComm = function(comment){
NewsModel.createComment(angular.extend({},
{data: data, newsId: newsId}, comment)).then(function (result){
initCreateComm();
$scope.getComments(); // Update comments
})
}

Answer 2

Simply call your server to retrieve all the comments when you need to refresh comments list.
function fetchComments(){
NewsModel.all().then(function(res){
$scope.comments = res;
});
}
and then call fetchComments() whenever you want to update the comments.