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="radio" ng-model="grouping" value="name"  />Name
<input type="radio" ng-model="grouping" value="gender" />Gender
<input type="radio" ng-model="grouping" value="hair" />Hair

<div data-ng-repeat="(group, users) in groupedFriends">
    <h2>{{group}}</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.$watch('grouping', function() {
        $scope.groupedFriends = _.groupBy($scope.friends, $scope.grouping);
    });
    
    $scope.grouping = "gender";
}