JSON Object's child array not being returned with AngularJS

Question

I'm having trouble getting an object's child array to be displayed with AngularJS.

In my app.js, I'm defining an array of objects as my main scope.

function MainCtrl($scope) {
    $scope.products = [
    {
        "id": "1",
        "title": "Red Hat",
        "sku": "Hat",
        "thumb": "100x100",
        "pages": [
            {
                "id": "360",
                "imgs": "01",
                "content": "stuff"
            },
            {
                "id": "Feature",
                "imgs": "02",
                "content": "Feature stuff"
            },
            {
                "id": "Size",
                "imgs": "03",
                "content": "Data stuff"
            }
        ]
    },
    {
        "id": "2",
        "title": "Blue Hat",
        "sku": "Hat",
        "thumb": "100x100",
        "pages": [
            {
                "id": "360",
                "imgs": "01",
                "content": "stuff"
            },
            {
                "id": "Feature",
                "imgs": "02",
                "content": "Feature stuff"
            },
            {
                "id": "Size",
                "imgs": "03",
                "content": "Data stuff"
            }
        ]
    }
]}

When I try to display the title, sku and thumbnail, everything renders correctly. My issue is when I try to display the pages array. When I try to make a list of the pages and just get their id's, nothing is even rendered.

  <ul ng-repeat="page in product.pages">
      <li>{{pages.page.id}}</li>
        <li>{{page.content}}</li>
    </ul>

I'm still new to angular and I'm not certain on the correct way to do things. So where am I going wrong with my code?

I put together a plunker with my code. Any help or pointers in the right direction is appreciated.

Answer 1

Your issue is that your ng-repeat for page in product.pages is outside of your ng-repeat for product in products.

Your html should look like this:

<ul ng-repeat="product in products">
  <li>{{product.sku}}</li>
  <li>{{product.title}}</li>
  <li>{{product.thumb}}</li>
  <ul ng-repeat="page in product.pages">
    <li>{{page.id}}</li>
    <li>{{page.content}}</li>
  </ul>
</ul>

Here's a working Plunker.