Angular properties (variables) use in the view - angularjs

Question

I have a list of schools and a 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 the controller I have
...
$scope.schools = schools;
$scope.teachers = teachers;
The question is related to the view. How can I achieve this?
Summer Elementary
JOHN HARRISON
Darren Nelson
Grady Middle
Manuel Steward
I've been using the "ng-repeat" directive, but how can I display only the teachers that belong to each schools?
Thanks!

Answer 1

You can filter the teachers in your ng-repeat:
<div ng-repeat="school in schools">
<div ng-repeat="teacher in teachers | filter: {school: school.id}">
But be sure to add an id property for each school that are used by the teachers.
Or if the teacher.school properties are the schools index in the schools array, you can do that:
<div ng-repeat="school in schools">
<div ng-repeat="teacher in teachers | filter: {school: $index}">
A final note: this will work but if you have many schools and teacher, it would be more performant to perform the filtering from javascript before you display it, i.e. build a structure like
schools = [{
nameOfInstitution: ...,
schoolLevel: ...,
teachers: [{
lastOrSurname: ...
}]
// ... etc
}];

Answer 2

Use filter:
<div ng-repeat="school in schools">
{{school.nameOfInstitution}}
<p ng-repeat="teacher in teachers | filter:{school: ''+ ($index+1)}:true">
{{teacher.name.lastOrSurname}}
</p>
</div>
But you'd better have some sort of id for schools...