Html
<div ng-controller="topicController">
<a href="#/dashboard">Dashboard</a> | <a href="#/topics">Topics</a> | <a href="#/users">Users</a>
<h4>{{topic.user_name}} posted a topic</h4>
<h2>{{topic.topic}}</h2>
<h4>Description: {{topic.description}}</h4>
<div ng-controller="postController">
<label>Post Your Answer here</label>
<form>
<textarea name="post" ng-model="new_post.post"></textarea>
<input type='submit' value='Submit' ng-click='addPost(users._id, topic._id, users.name)'>
</form>
<div ng-repeat="x in topic.posts">
<h4>{{x.post}}</h4>
<p>Likes:{{x.up_vote}} Dislikes:{{x.down_vote}}</p>
<ul ng-repeat="i in topic.posts[x].comments">
<li>{{topic.posts[x].comments[i].comment}}</li>
</ul>
<div ng-controller="commentController">
<form>
<textarea name="comment" ng-model="model.comment"></textarea><br>
<input type="submit" value="Submit" ng-click="addComment(users._id, x._id, users.name)">
</form>
</div>
</div>
</div>
</div>
Upon reviewing the information presented below, it is evident that all data items are correctly populated within the Topic Object, including topic Posts and comments nested within posts.
While the display of topics and posts works seamlessly as intended in my HTML page, challenges arise when attempting to showcase the associated comments.
Despite successfully adding comments to the database, they remain invisible on the frontend. A visual representation depicting the entire object from my console is attached for reference.
Could the issue lie within the ng-repeat function implementation?