data under groupColumn incorrect if more than a single groupColumn specified

this plunkr is taken from the tutorial, but has been whittled down to have only 1 ChangeGrouping button.

Unlike the tutorial example, this is meant to reverse the grouping order - that is, the grid is initially grouped by State, and then on Gender, and after pushing the button the idea is to have the grid grouped by gender and then by state, using the function:

    $scope.changeGrouping = function() {
      $scope.gridApi.grouping.clearGrouping();
      $scope.gridApi.grouping.groupColumn('gender');
      $scope.gridApi.grouping.groupColumn('state');
    };

however, when the button is pressed, the group headers are correct, but the data under the headers is not - for both the Male and Female headers, only females are displayed.

using firefox 49.01