JAVASCRIPT

Changing the value of a dropdown when the value of a number box changes in AngularJS

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', '$http', function($scope, $http) {
    $scope.pizzaBox = {
      numSlices: 5,
      pizzaSizes: ["Small", "Large"],
      selectedPizzaSize: "Small"
    };

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <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>
</div>