ng-repeat with nested json objects - angularjs

Question

I'm trying to create a nested ng-repeat that populates contacts names into buttons from the JSON objects. I cant seem to find the correct way to populate the info though. Can someone explain whats wrong with my ng-repeat?
http://plnkr.co/edit/B3g075?p=preview
<!-- Contacts List Section -->
<div class="col-md-3 contact-list">
<div class="list-group">
<a href="javascript:void(0);" ng-repeat="contact in groups.contacts" class="list-group-item" ng-click="selectContact(contact)">{{group.firstName}} {{group.lastName}}
<span ng-click="deleteContact()" class="onHover pull-right"><i class="fa fa-times"></i></span>
</a>
</div>
<button ng-click="isCreatingNewContact = true" class="btn btn-default"><i class="fa fa-plus"></i> New Contact</button>
</div>
$scope.groups has the following structure (shortened for brevity):
$scope.groups = [
{
name: "Personal",
contacts: [
{
"firstName": "Personal First Name",
"lastName": "last name",
// ...
},
{ /* another contact */ },
]
},
{
name: "Family",
contacts: [
// ...
]
},
];
Thanks

Answer 1

Notice how here:
<div class="col-md-3 group-list">
<!-- Groups Section -->
<h4>Contact Groups</h4>
<div class="list-group">
All Contacts
<a href="javascript:void(0);" ng-repeat="group in groups" class="list-group-item">{{group.name}}
<span ng-click="deleteGroup()" class="onHover pull-right"><i class="fa fa-times"></i></span>
</a>
</div>
<div class="col-bottom">
<button class="btn btn-default"><i class="fa fa-plus"></i> New Group</button>
</div>
</div>
You have an ng-repeat="group in groups" directive, iterating through the groups. The group you get while looping through groups is only active in the sub-scope of the <a> tag that you're calling the directive in.
You seem to want to get all of the contact objects of each object in groups. You'd have to iterate through the groups list again, and within that iteration, iterate through the objects in the group contacts. So something like:
<!-- Contacts List Section -->
<div class="col-md-3 contact-list">
<div class="list-group">
<div ng-repeat="group in groups">
<a href="javascript:void(0);" ng-repeat="contact in group.contacts" class="list-group-item" ng-click="selectContact(contact)">{{contact.firstName}} {{contact.lastName}}
<span ng-click="deleteContact()" class="onHover pull-right"><i class="fa fa-times"></i></span>
</a>
</div>
</div>
<button ng-click="isCreatingNewContact = true" class="btn btn-default"><i class="fa fa-plus"></i> New Contact</button>
</div>
Plunker: http://plnkr.co/edit/lqNd5yDC2QlrX0M9TjrP