当数字框的值在AngularJS中更改时更改下拉列表的值

<input name="nameForNumberField" ng-model="pizzaBox.numSlices" type="number" ng-change="onNumSlicesChanged()"/>

<select id="nameForDropdown" data-ng-model="pizzaBox.selectedPizzaSize" ng-options="x for x in pizzaBox.pizzaSizes"></select>

我会考虑一个比萨盒,有8个或更少的薄片和一个比萨盒,有8个以上的薄片。默认情况下,披萨盒有5片,因此很小。

$scope.pizzaBox = { 
numSlices: 5, 
pizzaSizes: ["Small", "Large"], 
selectedPizzaSize: "Small" 
};

$scope.onNumSlicesChanged = function () {
    if ($scope.pizzaBox.numSlices <= 8) {
        $scope.selectedPizzaSize = "Small";
    }
    else {
        $scope.selectedPizzaSize = "Large";
    }
};

我想要的是,当我将数字字段更改为大于8的数字时,我希望下拉列表的值从小变大。在类似的情况下,如果数字框中的数字大于8,并且下拉值很大,当我将数字值更改为4时,我希望下拉值从大变小。

我尝试了上面概述的代码。结果是,当我在数字字段中更改数字时,下拉列表中选择的值根本没有更改。我能够更改下拉列表值的唯一方法是单击下拉列表并手动更改它。我只想在前端已经通过上面概述的逻辑默认为其所选的披萨大小后再这样做。

我希望当我更改数字字段中的值时,下拉列表中的值将根据所述逻辑自动更改。