The initial value of ng-model is not selected in select

advertisements

When the page loads I want the select option to select the value set for the ng-model. Right now, it does not. When I change the value in the input box it does change the dropdown value too.

http://plnkr.co/edit/wOXkmXpLUCkzL5EYuP0W?p=preview

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example94-production</title>

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

</head>
<body ng-app="selectExample">
    <script>
  angular.module('selectExample', [])
    .controller('ExampleController', ['$scope', function($scope) {

      $scope.cars = [
        'Honda','Tesla','BMW','Toyota'
      ];
      $scope.myObj = {
        myColor:'13',
        myCat:'Tesla'
      };

      $scope.GetColorByCar=function(){
        if($scope.myObj.myCat === 'Honda'){
          $scope.colorsByCar = [
        {name:'black', id:11,bt:'Honda'},
        {name:'white', id:12,bt:'Honda'}];
        } else {
          $scope.colorsByCar = [
            {name:'xyz black', id:11,bt:'Tesla'},
            {name:'red', id:201,bt:'Tesla'},
            {name:'blue', id:301,bt:'Tesla'},
            {name:'yellow', id:411,bt:'BMW'}
            ];
        }
      };

    }]);
  </script>
  <div ng-controller="ExampleController">
    <input ng-model="myObj.myCat">
    <input ng-model="myObj.myColor"><br>
    Cars:
    <select ng-model="myObj.myCat" ng-click="GetColorByCar()">
      <option ng-repeat="car in cars" value="{{car}}">{{car}}</option>
    </select><br>
    Colors:
    <select ng-model="myObj.myColor" ng-options="color.id as color.name for color in colorsByCar"></select><br>
    Currently selected: {{myObj.myCat}}
    Currently selected: {{myObj.myColor}}
  </div>
</body>
</html>


You need to do a few of things for this to work

Change the select to use ngOptions

<select ng-model="myObj.myCat" ng-options="car for car in cars" ng-click="GetColorByCar()"></select>

Then myObj.myCat needs to reference the cars array

$scope.myObj = {
    myColor: '201',
    myCat: $scope.cars[1]
};

Lastly you will need to watch for changes on myObj.myCat and run the code when it changes

$scope.$watch('myObj.myCat', function() {
    ...
}

Here is the update plunker: http://plnkr.co/edit/Gl7vcBp4MpAJgtycQLUn?p=preview