Angular: V4. Multiple ng-repeat tables (Not filling DOM w. LVL2)

DOM NOT filled with all Level 2 tables. (Pimped with radius corners etc.)

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
Order by <input type="checkbox" />Name
<input type="checkbox" />Gender
<input type="checkbox" />Hair

<div data-ng-repeat="(gender, users) in groups">
    <h2>{{gender}}</h2>        
    <ul>
        <li data-ng-repeat="user in users">
            {{ user.name }}
        </li>
    </ul>
</div>

JavaScript

function myCtrl($scope){
$scope.friends = [
		{
			name: "Michael",
			gender: "Male",
			hair: "Brunette"
		},
		{
			name: "George Michael",
			gender: "Male",
			hair: "Brunette"
		},
		{
			name: "Gob",
			gender: "Male",
			hair: "Brunette"
		},
		{
			name: "Tobias",
			gender: "Male",
			hair: "Black"
		},
		{
			name: "Lindsay",
			gender: "Female",
			hair: "Blonde"
		},
		{
			name: "Maeby",
			gender: "Female",
			hair: "Black"
		}
	];
    $scope.groups = _.groupBy($scope.friends, "gender");
    $scope.activeGroups = {};
}