ng-repeat nested json array angularJS

Question

i'm trying to iterate comments inside a nested json object with angular ng-repeat directive, but in somehow it seems not accessing to it, what i am doing wrong?

Here the json

        posts: [
        {
            title: 'Free pizza at club meetings',
            upvotes: 15,
            comments: [
                {commento:'comment1'},
                {commento:'comment2'}
            ]
        },
        {
            title: 'End all club emails with Laffy Taffy jokes',
            upvotes: 9,
            comments: [],
        }
];

and here the view

    <div class="col-lg-12 col-xs-12 comment" ng-repeat="post in posts | orderBy:'-upvotes'">
    <p>{{post.title}}</p>
    <p>
        <span class="glyphicon glyphicon-plus-sign" ng-click="upVote(post)" style="cursor:pointer;"></span> Upvotes: {{post.upvotes}}
    </p>
    <p ng-repeat comment in post.comments>
    {{comment.commento}}
    </p>
</div>

the in the view give me error

Answer 1

Your syntax of ng-repeat is wrong:

<p ng-repeat comment in post.comments>

should be

<p ng-repeat="comment in post.comments">

Answer 2

Just small syntax error- check the below code: JSFiddle

var app = angular.module("demoApp", []);

app.controller('myCtrl', function($scope){

    $scope.posts= [
            {
                title: 'Free pizza at club meetings',
                upvotes: 15,
                comments: [
                    {commento:'comment1'},
                    {commento:'comment2'}
                ]
            },
            {
                title: 'End all club emails with Laffy Taffy jokes',
                upvotes: 9,
                comments: [{commento:'comment3'},
                    {commento:'comment4'}]
            }
    ];
		$scope.upVote = function(post){}
});

<div ng-app="demoApp" ng-controller="myCtrl">
<div ng-repeat="post in posts">
    <span>{{post.title}}</span>
    <p class="glyphicon glyphicon-plus-sign" ng-click="upVote(post)" style="cursor:pointer;"></p> Upvotes: {{post.upvotes}}
    
    <p ng-repeat = "comment in post.comments">
        {{comment.commento}}
    </p>
</div>
</div>

Answer 3

ok was only an formatted error

<p ng-repeat="comment in post.comments">

Answer 4

Observations :

• Use <p ng-repeat="comment in post.comments"> instead of <p ng-repeat comment in post.comments>.
• $scope.posts object is not declared correctly. use $scope.posts = [] instead of $scope.posts: [].

DEMO

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
    $scope.posts = [
        {
            title: 'Free pizza at club meetings',
            upvotes: 15,
            comments: [
                {commento:'comment1'},
                {commento:'comment2'}
            ]
        },
        {
            title: 'End all club emails with Laffy Taffy jokes',
            upvotes: 9,
            comments: [],
        }
];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="col-lg-12 col-xs-12 comment" ng-repeat="post in posts | orderBy:'-upvotes'">
    <p>{{post.title}}</p>
    <p>
        <span class="glyphicon glyphicon-plus-sign" ng-click="upVote(post)" style="cursor:pointer;"></span> Upvotes: {{post.upvotes}}
    </p>
    <p ng-repeat="comment in post.comments">
    {{comment.commento}}
    </p>
</div>
</div>