angularjs - Angular properties (variables) use in the view -

i have list of schools , list of teachers.

schools

    [     {     "id": 1,     "nameofinstitution": "summer elementary",     "schoollevel": "01304"     },     {     "id": 2,     "nameofinstitution": "grady middle",     "schoollevel": "02400"     }     ] 

teachers

[ {   "id": "1",   "school": "1",   "name": {     "lastorsurname": "harrison",     "firstname": "john",     "middlename": ""   } }, {   "id": "2",   "school": "1",   "name": {     "lastorsurname": "nelson",     "firstname": "darren",     "middlename": ""   } }, {   "id": "3",   "school": "2",   "name": {     "lastorsurname": "stewart",     "firstname": "manuel",     "middlename": ""   } }] 

in controller have ...

$scope.schools = schools; $scope.teachers = teachers; 

the question related view. how can achieve this?

• summer elementary
  • john harrison
  • darren nelson
• grady middle
  • manuel steward

i've been using "ng-repeat" directive, how can display teachers belong each schools?

thanks!

you can filter teachers in ng-repeat:

<div ng-repeat="school in schools">   <div ng-repeat="teacher in teachers | filter: {school: school.id}"> 

but sure add id property each school used teachers.

or if teacher.school properties schools index in schools array, can that:

<div ng-repeat="school in schools">   <div ng-repeat="teacher in teachers | filter: {school: $index}"> 

a final note: work if have many schools , teacher, more performant perform filtering javascript before display it, i.e. build structure like

schools = [{   nameofinstitution: ...,   schoollevel: ...,   teachers: [{     lastorsurname: ...   }]   // ... etc }];