Selection changes to blank when reloading datasource

[Charles]

I am having trouble getting the selected value in a dropdownlist to stay put.

My application, which uses AngularJS 1.6, loads a large-ish dataset, and I have two Kendo DropDownLists that each apply a different filter to the data. The first one uses a static set of data, loaded into an ObservableArray; the second relies on me loading a set of unique values from the dataset into another ObservableArray, along with a default "description" value. As the first filter changes, the second filter is supposed to reload those unique values, since the first filter might have filtered out all of the records mathcing one or more of those values. There is nothing asynchronous going on here, or at least not that I'm aware of.

What I am seeing is that, when I change the selection in the first dropdown, whatever is selected in the second dropdown is blanked out--that is, it shows a blank selection. The values that are displayed when I open the dropdown are correct, the dataset is filtered as if the selected value is still displayed, and the act of opening the dropdown and then clicking off of it is sufficient to cause it to re-display the selected value.

I have tried 6 different ways from Sunday to ensure that the value of the second dropdown remains displayed, but I am out of ideas. Here is the HTML:

<form name="form" class="form-inline">
    <select name="accountStatus" style="width: 180px;" class="form-control" ng-model="status" ng-change="onAccountStatusChange(status)" kendo-drop-down-list k-options="accountStatusOptions"></select>
    <select name="filterByRegion" style="width: 180px;" class="form-control" ng-model="selectedRegion" ng-change="onRegionFilterChange(selectedRegion)" kendo-drop-down-list k-options="regionFilterOptions"></select>
</form>

And here are each of the JS methods invoked in the process of changing the selections and updating the second ObservableArray:

$scope.onRegionFilterChange = function(selectedRegion) {
    $scope.selectedRegion = selectedRegion;
};

$scope.onAccountStatusChange = function(status) {
    $scope.status = status;
    updateRegionFilterList();
};

var updateRegionFilterList = function () {
    $scope.regions.empty();

    angular.forEach($scope.accounts, function(account) {
        if (account.reviewStatus === $scope.status) {
            if ($scope.regions.indexOf(account.regionID)) = -1)
                $scope.regions.push(account.regionID);
            }
        }
    });

    $scope.regions.sort();
    $scope.regions.unshift("Filter By Region:");
    if ($scope.regions.indexOf($scope.selectedRegion)) = -1) {
        $scope.selectedRegion = "Filter By Region";
    }
};

Among the things I've tried are: instead of using the empty() command on the ObservableArray, I've tried testing each value in it to see if it should still be displayed, and splicing out those that shouldn't be; storing the current selected value in a temp variable and reloading it at the end of the method. I've also checked the values in the debugger and even added a toastr message to display the selected value, all of which showed that it should have been showing up just fine.

Any ideas?

[Charles]

I figured it out with some assistance from a friend. The way I have the dropdowns set up in the HTML, using a mix of Kendo and Angular configurations, combined with using Angular to try to update things, with the end result being that the MVVM wasn't updating at the right time. I switched to pure Kendo in the HTML and Javascript, and now it works.