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


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.

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

  <script src="//"></script>

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

      $ = [
      $scope.myObj = {

        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'}

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

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: $[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: