Default Value of select box not being set

Question

I have a data structure like so:

$scope.personalityFields.traveller_type = [
  {"id":1,"value":"Rude", "color":"red"},
  {"id":2,"value":"Cordial", "color":"yellow"},
  {"id":3,"value":"Very Friendly", "color":"green"},
];     

And a select box that looks like so:

<select map-value name="traveller_type" ng-init="init_select()" class="full-width" ng-model="traveller_type" ng-options="item as item.value for item in personalityFields.traveller_type">
  <option value="" disabled selected> Choose ...</option>
</select>  

How do I set the value of the select box to a value based on a response that maps to the "value" field in the attached JSON? Please help !

So if in the response, the traveller_type is field is set to "Rude", I would want the value of "Rude" to be set in the select box. This what the response looks like:

someObject = {
    traveller_type: "Rude"
}

this needs to be displayed on the select box

Answer 1

If you have only value("Rude","Cordial","Friendly") back from response, you have to change ngOptions syntax to be ng-options="item.vaue as item.value for item in personalityFields.traveller_type"(bind item.value to options)

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.traveller_type = 'Rude';
    $scope.personalityFields = {
      "traveller_type": [{
          "id": 1,
          "value": "Rude",
          "color": "red"
        },
        {
          "id": 2,
          "value": "Cordial",
          "color": "yellow"
        },
        {
          "id": 3,
          "value": "Very Friendly",
          "color": "green"
        },
      ]
    };
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <select map-value name="traveller_type" class="full-width" ng-model="traveller_type" ng-options="
                    item.vaue as item.value for item in personalityFields.traveller_type">
    <option value="" disabled selected> Choose ...</option>
  </select>
  {{traveller_type}}
</div>

Else you have entire object({"id":1,"value":"Rude", "color":"red"}) back from response, you have to change ngOptions syntax to be ng-options="item as item.value for item in personalityFields.traveller_type track by item.value"(use track by to only compare value property)

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.traveller_type = {
          "id": 1,
          "value": "Rude",
          "color": "red"
        };
    $scope.personalityFields = {
      "traveller_type": [{
          "id": 1,
          "value": "Rude",
          "color": "red"
        },
        {
          "id": 2,
          "value": "Cordial",
          "color": "yellow"
        },
        {
          "id": 3,
          "value": "Very Friendly",
          "color": "green"
        },
      ]
    };
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <select map-value name="traveller_type" class="full-width" ng-model="traveller_type" ng-options="
                    item as item.value for item in personalityFields.traveller_type track by item.value">
    <option value="" disabled selected> Choose ...</option>
  </select>
  {{traveller_type}}
</div>

Answer 2

There are a couple of things wrong with your code, below is an example of you can do to achieve your goal:

angular.module('limitToExample', [])
      .controller('ExampleController', ['$scope', function($scope) {
        $scope.serverResponse = {
          "id": 1,
          "value": "Rude",
          "color": "red"
        };
        $scope.personalityFields = {

          traveller_type: [{
            "id": 1,
            "value": "Rude",
            "color": "red"
          }, {
            "id": 2,
            "value": "Cordial",
            "color": "yellow"
          }, {
            "id": 3,
            "value": "Very Friendly",
            "color": "green"
          }],
        }

      }]);

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-example103-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>



</head>

<body ng-app="limitToExample">
  
  <div ng-controller="ExampleController">
    <select map-value name="traveller_type" class="full-width" ng-model="serverResponse" ng-options="item as item.value for item in personalityFields.traveller_type track by item.value">

</select>

  </div>
</body>

</html>

This is one way of setting the default value, you can make it dynamic based on the response of your server (guess that is what you want?)

I am only replicating what @Pengyy describes in his answer, so feel free to accept his over mine.