Angular Nested ng-repeats with json call not working

Question

I am attempting to make a nested list like this using ng-repeat and a json file:

    [] Pizza King North Region
       [] Pizza King 102 
       [] Pizza King 103    
       [] Pizza King 104
   [] Pizza King South Region     
      [] Pizza King 201    
      [] Pizza King 202
   [] Pizza King East Region   
      [] Pizza King 203    
      [] Pizza King 204   
   etc...

This is my json object

 {
  "groups": [
    {
      "group_id": "Pizza King North Region",
      "systems" : [
        {
          "panel_id": "Pizza King 101"
        },
        {
          "panel_id": "Pizza King 102"
        },
        {
          "panel_id": "Pizza King 103"
        },
        {
          "panel_id": "Pizza King 104"
        }
      ]
    },
    {
      "group_id": "Pizza King South Region",
      "systems" : [
        {
          "panel_id": "Pizza King 101"
        },
        {
          "panel_id": "Pizza King 102"
        },
        {
          "panel_id": "Pizza King 103"
        },
        {
          "panel_id": "Pizza King 104"
        }
      ]
    },
    {
      "group_id": "Pizza King East Region",
      "systems" : [
        {
          "panel_id": "Pizza King 101"
        },
        {
          "panel_id": "Pizza King 102"
        },
        {
          "panel_id": "Pizza King 103"
        },
        {
          "panel_id": "Pizza King 104"
        }
      ]
    },
    {
      "group_id": "Pizza King West Region",
      "systems" : [
        {
          "panel_id": "Pizza King 101"
        },
        {
          "panel_id": "Pizza King 102"
        },
        {
          "panel_id": "Pizza King 103"
        },
        {
          "panel_id": "Pizza King 104"
        }
      ]
    }
  ],
  "systems": [
    {
      "panel_id": "Pizza King 101"
    },
    {
      "panel_id": "Pizza King 102"
    },
    {
      "panel_id": "Pizza King 103"
    },
    {
      "panel_id": "Pizza King 104"
    }
  ]
}

This is how I'm bringing it into my app in the controller:

    App.controller('AddUserMultiCtrl', ['$rootScope', '$scope', '$http', '$modal', function ($rootScope, $scope, $http, $modal) {

  var addUserMulti = this; // controllerAs
  console.clear();

  $http.get('app/users/data-temp/systems.json')
    .success(function(response) {
      addUserMulti.groups = response.groups;
      addUserMulti.systems = response.systems;
    })
    .error(function (data) {
      console.log("Error retrieving user data.");
    });

This is my html:

<ul class="nav">

  <li ng-repeat="group in addUserMulti.groups">
    <label class="checkbox checkbox-inline c-checkbox"> <input id="inlineCheckbox1" type="checkbox"
      value="option1"/><span class="fa fa-check"></span><strong>{{group.group_id}}</strong></label><i class="fa fa-angle-down fa-2x pull-right"></i>
  </li>
  <ul class="nav">
    <li ng-repeat="system in group.systems">
      <label class="checkbox checkbox-inline c-checkbox"> <input id="{{ system.panel_id }}" type="checkbox"
        value="option1">{{ system.panel_id }} </label>
    </li>
  </ul>
</ul>

This is the result: My Groups come in but no nested systems

I get a list of parent items, but no children.

I would sure appreciate some direction on this as all code examples that I have tried to follow aren't working so far!

Answer 1

Systems is an array inside groups so if you don't iterate systems inside groups you won't see any children.

You have to put your system in group.systems block inside your group in addUserMulti.groups block.

Answer 2

Try this:

<ul class="nav">

  <li ng-repeat="group in addUserMulti.groups">
    <label class="checkbox checkbox-inline c-checkbox"> <input id="inlineCheckbox1" type="checkbox"
      value="option1"/><span class="fa fa-check"></span><strong>{{group.group_id}}</strong></label><i class="fa fa-angle-down fa-2x pull-right"></i>

    <ul class="nav">
      <li ng-repeat="system in group.systems">
        <label class="checkbox checkbox-inline c-checkbox"> <input id="{{ system.panel_id }}" type="checkbox" ="option1">{{ system.panel_id }} </label>
      </li>
    </ul>

  </li>      
</ul>

This way, group is properly nested and so group.systems exists.