如何按升序填充所选项目？

Question

我们在项目中使用了Angular js和Kendo，在一页中，我们使用了如下所示的多选框

<div class="core-field-container" ng-class='{ "core-show-form-errors": assignUnassignUserProjectRoleDialog.validations.value.Roles }'>
        <label class="core-label required" ng-bind="::CoreResources.LabelMemberRoles"></label>
        <div class="scrollWrap" id="RolesDiv">
            <select style="overflow-y:auto !important; max-height: 160px !important" kendo-multi-select id="Roles" name="Roles" k-options="assignUnassignUserProjectRoleDialog.roleListOptions()" required ng-model="assignUnassignUserProjectRoleDialog.roles" ng-focus tabindex="1"></select>
            <label class="core-label-error">{{requiredErrorMessage.replace('{0}',CoreResources.LabelMemberRoles)}}</label>
        </div>
    </div>

保存少量数据后，在编辑同一记录时，所选列表/数据未按升序填充。那么如何对所选列表进行排序？

JS代码，

roleListOptions: function () {
        return {
            placeholder:'',
            dataTextField: "RoleName",
            dataValueField: "RoleId",
            filter: "contains",                
            valuePrimitive: true,
            template: '<div class="core-common-ellipsis">#:data.RoleName #</div>',
            dataBound: function () {
                core.common.comboboxTooltipEllipsis();
            },
            dataSource: {
                type: "odata-v4",
                transport: {
                    read: {
                        url: $user.ServiceUri + "Roles?isProjectRoles=true&$select=RoleName,RoleId&$orderby=RoleName asc",
                        dataType: "json",
                        beforeSend: $authMgr.setHeaders
                    }
                }
            },
            change: function (e) {
                $timeout(function () { $scope.assignUnassignUserProjectRoleDialog.assignUserRoleForm.$dirty = true; });
            }
        };
    },