How to add item to array in ng-repeat with lazy loading - angularjs

Question

I have an array of comments. For each of the comment, I have a hidden form where you can reply. That item in each object of the array is called: comment.showSubCommentForm. When I click on Reply, I want to be able to reply with a comment and the function called: commentOnSubPost.
I load my data in chunks of 10 (lazy loading) which I am doing by using the infinite-scroll-distance Angular module. Every time I reach the end of the page, I get the next 10 items and add them to the $scope.comments array, which you can see below is what I am running my ng-repeat on .
The problem is that, although the commentOnSubPost works really well as in it adds the reply to the comment, I have reload the data so I can get the updated $scope.comments with the new reply. BUT - as I have implemented lazy loading, how do I do that if say I am on the 20th page?
I looked at some similar posts but their approach from mine was very different so am very lost.
My HTML:
<div infinite-scroll='loadMore()' infinite-scroll-distance='1'>
<div class="row">
<div ng-repeat="comment in comments track by $index">
<ul class="comments">
<li class="clearfix">
<a ng-href="#">SomeLink</a>
<div>
<p >{{ comment.date }} <a ng-href="/wall#/profile/main/{{ comment.userID }}">{{ comment.fullname }}</a> says <i class="commentReply"><a href ng-click="comment.showSubCommentForm = !comment.showSubCommentForm"><small>Reply</small></a></i></p>
<p class="mainComment">
{{ comment.comment }}
<p class="meta"><i class="showReply"><a href ng-click="comment.showReplies = !comment.showReplies"><small>Show Replies</small></a></i></p>
</p>
</div>
<div ng-show="comment.showSubCommentForm">
<form ng-submit="commentOnSubPost( post._id, comment._id, subComment)">
<div class="form-group">
<div class="form-group">
<textarea ng-model="subComment" class="form-control" placeholder="Reply to the above comment"></textarea>
</div>
<input type="submit" value="Reply">
</div>
</form>
<div ng-show="comment.showReplies" ng-repeat="subComment in comment.subComments track by $index">
<ul class="comments">
<li class="clearfix">
<a ng-href="/wall#/profile/main/{{ comment.userID }}"><img ng-src="{{ subComment.profilePic }}" class="avatar" style="border-radius: 50%"></a>
<div class="post-subComments">
<p class="meta">{{ subComment.date }}<a ng-href="SomeLink"> {{ subComment.fullname }}</a></p>
<p>
{{ subComment.comment }}
</p>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
I won't add too much information here as I don't want to overload this post but if you need any particular information, please do let me know. I just need to know how do I reload the data (or not if there's another approach) so that I can get the latest data.
I hope this makes sense.
Thanks in advance!

Answer 1

Like you have $scope.comments = []; then on each call you just have to append upcoming data to this array.
Like $scope.comments = $scope.comments.concat(response.data);
In this way lazy loading will work.

Answer 2

I fixed this with making a Node route which gives back the exact comment I have just added. Then, I found that commentID in my $scope.comments and made it's subCommenemts to the one I have locally.
It does the job and the data is real. One drawback is that if at that time, there's another comment, it won't show up until the page's refreshed but I'm not too fussed about that.