how to set group label ordering angularjs ui-select group-by

I am using ui-select-choices group-by to group the list in UI select, grouping is working fine but the problem I am facing is the group labels are not in alphabetical order, below is a code snippet

HTML:

<div class="col-md-5">
            <ui-select name="template" ng-model="template.data" theme="bootstrap"
              ng-disabled="ctrl.disabled" sortable="true">
              <ui-select-match placeholder="-- Select --">{{$select.selected.name}}</ui-select-match>
              <ui-select-choices group-by="'itemType'"
                repeat="rf in templates | propsFilter: {name: $select.search} | orderBy : 'name' : false">
                <div ng-bind-html="rf.name | highlight: $select.search"></div>
              </ui-select-choices>
            </ui-select>
          </div>

Output:

the problem with this output is the groups are not ordered alphabetically ie. "Customer" should come before "User" any idea on how to achieve this.

Note: I have already order my array by item type but no change in output.

Thanks in advance.

Try group-filter option:

<ui-select-choices group-by="'itemType'"
                   group-filter="orderFilterFn"
                   repeat="rf in templates | propsFilter: {name: $select.search} | orderBy : 'name' : false">
    <div ng-bind-html="rf.name | highlight: $select.search"></div>
</ui-select-choices>

and perform sorting in function orderFilterFn using $filter:

$scope.orderFilterFn= function(groups) {
    return $filter('orderBy')(groups, 'name');
};