Kendo multiselect cross icon issue

Question

I am using Kendo multiselect. I am facing issue while removing selected items using cross icon which are coming in kendo multi select at right hand side as shown in image below,

as per above image it is showing 8 item selected in drop down so to remove selected items when I click on highlighted cross icon it is removing item one by one but it should clear all selection when click on highlighted cross icon.

below is my code that I have written for drop down.

 <select id="RegionDDL" kendo-multi-select="" k-options="RegionOptions" k-ng-delay="RegionOptions"
                                                        k-ng-model="CommonFilter.Regions"></select>

 $scope.RegionOptions = {
                    autoBind: false,
                    placeholder: "Select All",
                    dataTextField: "Text",
                    dataValueField: "ID",
                    filter: "contains",
                    tagMode: "single",
                    change: OnRegionChange,
                    // ************ Below commented to remove cascading functionality *************
                    //filtering: function (e) { $scope.callDataBoundFn = false; },
                    dataBound: function (e) {
                        current = this.value();
                        this._savedOld = current.slice(0);
                        // handle the event
                    },
                    dataSource: $scope.RegionDataSource
                };

  $scope.RegionDataSource = {
                    transport: {
                        read: {
                            url: window.versionType + "api/GetRegions",
                            headers: {
                                "Authorization": "Bearer " + sessionStorage["accessToken"],
                                "coreInfo": JSON.stringify(coreInfo)
                            },
                            dataType: "json",
                        }
                    }
                };

Please help.