angularjs - Nested JSON in one ng-repeat -

i'm new angular, , i'm having problems ng-repeats. have 1 ng-repeat have show nested objects in each repeat. know mean?

this html:

<li ng-repeat="rm in rooms">     <a href="">         <span id="room">{{rm.room}}</span>         <span id="rack_num">rack {{rm.rack}}</span>         <span id="slot_type">{{rm.type}}</span>         <span id="slot_id">slot {{rm.id}}</span>     </a> </li> 

i have list of "rooms" , "racks" , "slots":

 [ {   "room": 1,   "rackroom": [     {       "rack": 8,       "rackslots": [         {           "slot": 1,           "id": "ez345t1r",           "type": "single"         }       ]     },     {       "rack": 12,       "rackslots": [         {           "slot": 3,           "id": "56xzu28",           "type": "double"         }       ]     }   ] }, {   "room": 2,   "rackroom": [     {       "rack": 12,       "rackslots": [         {           "slot": 1,           "id": "tze57dg",           "type": "single"         }       ]     },     {       "rack": 32,       "rackslots": [         {           "slot": 7,           "id": "778ghrt",           "type": "double"         }       ]     }   ] } ] 

my controller looks this:

$http.get('data/data.json').success(function(data) {          $scope.rooms = [];         $scope.slots = [];         $scope.racks = [];         angular.foreach(data, function(key, val){             $scope.rooms.push(key);             angular.foreach(key.rackroom, function(key, val){                 $scope.racks.push(key);                 angular.foreach(key.rackslots, function(key, val){                     $scope.slots.push(key);                 });             });         });       }); 

the output should this:

• room: 1 • rack: 12 • type: single • slot: 3  • room: 1 • rack: 24 • type: single • slot: 8 

it seems i'm wrong because rooms appear not nested objects. if make 3 separate repeats (slot in slots, rack in racks, room in rooms) appeear, need in 1 repeat ... thank help!

i think following close want:

var app = angular.module('demo', []);    app.controller('mainctrl', function($scope) {    var data = [{      "room": 1,      "rackroom": [{        "rack": 8,        "rackslots": [{          "slot": 1,          "id": "ez345t1r",          "type": "single"        }]      }, {        "rack": 12,        "rackslots": [{          "slot": 3,          "id": "56xzu28",          "type": "double"        }]      }]    }, {      "room": 2,      "rackroom": [{        "rack": 12,        "rackslots": [{          "slot": 1,          "id": "tze57dg",          "type": "single"        }]      }, {        "rack": 32,        "rackslots": [{          "slot": 7,          "id": "778ghrt",          "type": "double"        }]      }]    }];      $scope.rooms = [];    angular.foreach(data, function(room) {        angular.foreach(room.rackroom, function(rack) {        angular.foreach(rack.rackslots, function(slot) {          $scope.rooms.push({            room: room.room,            rack: rack.rack,            type: slot.type,            slot: slot.slot          });        });      });    });  });

.room,  .rack_num,  .slot_type,  .slot_id {    display: list-item;  }  .room_item {    margin: 10px;  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>  <div ng-app="demo" ng-controller="mainctrl">    <ul>      <li class="room_item" ng-repeat="rm in rooms">        <a href="">          <span class="room">room: {{rm.room}}</span>          <span class="rack_num">rack: {{rm.rack}}</span>          <span class="slot_type">type: {{rm.type}}</span>          <span class="slot_id">slot {{rm.slot}}</span>        </a>      </li>    </ul>  </div>

the markup may not quite right, can tweak here.

also, if going repeat something, shouldn't use id elements. ids supposed unique across whole page. use classes instead, did.