JAVASCRIPT

Display name instead ID modal dropdown in angularjs

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.userInput = {
      state: {}
    };
    $scope.state = [{
      "name": "Califoria",
      "id": 1
    }, {
      "name": "Texas",
      "id": 2
    }]

    $scope.getCounties = function() {
      // $scope.userInput.state is updated autmatically with the ID
      console.log($scope.userInput)
      // the associated data can be found using 
      let state = $scope.state.find(s => s.id == $scope.userInput.state)
      $scope.selectedState = state.name; // for display

    }
  }]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-model="userInput.state" ng-change="getCounties()">
    <option ng-repeat="item in state" value="{{item.id}}">
      {{item.name}}
    </option>
  </select>

 <p> {{selectedState}} </p>
</div>