AngularJs working with nested arrays within objects

Question

I'm trying to display information from child and parent data within a json object. Below is my data:

$scope.electionDetails = {
  id : 1,
  election_type: "CityCouncil",
  election_name: "City A City Council Elections
  candidates : [{
               id: 1,
               election_id: 1,
               position_id: 1,
               first_name: "John",
               last_name: "Doe"
               },
               {
               id:2,
               election_id:1,
               position_id:1,
               first_name: "Jane",
               last_name: "Doe"
               },
               {
               id:3,
               election_id:1,
               position_id:2,
               first_name: "Mike",
               last_name: "Doe" 
               },
               {
               id:4,
               election_id:1,
               position_id:2,
               first_name: "Mary",
               last_name: "Doe"
               }],
 positions : [{
             id:1,
             election_id: 1,
             position: "Seat 1"
             },
             {
             id:2,
             election_id:1,
             position: "Seat 2"
             }]

}

I want to display this data grouped, using angular like so:

City A City Council Elections

Seat 1

• John Doe
• Jane Doe

Seat 2

• Mike Doe
• Mary Doe

Answer 1

Here you go. The HTML structure may not be exactly what you want, so you can change up what tags you use, but this is the basic idea using ng-if and ng-repeat to create lists of candidates for a given seat.

DEMO