Angular select doesn't reflect its model

Question

strange behavior for me. I'm pretty new to Angular and probably I'm doing wrong something.

This is my scenario:

HTML:

<div ng-controller="ExampleController">
  <label>Color:
    <select ng-model="myColor" ng-options="color.name for color in colors">
    <option value="">-- choose color --</option>
    </select>
  </label>
 <div>
<button ng-click="myColor = { name:'not in list', shade: 'other' }">clear</button>
 </div>
</div>

JS:

angular.module('selectExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.colors = [
      {name:'black', shade:'dark'},
      {name:'white', shade:'light'},
      {name:'red', shade:'dark'},
      {name:'blue', shade:'dark'},
      {name:'yellow', shade:'light'}
    ];
    $scope.myColor = $scope.colors[2];
  }]);

and here's the fiddle:

https://jsfiddle.net/t18uggqt/

Can someone helps me, please to understand why the select doesn't reflect the model (there's only first choice available)

Thanks!

Answer 1

In your jsfiddle, you haven't included ng-app="selectExample"

and call angularJs inside body/ head when you use jsFiddle.

Please find the updated fiddle: https://jsfiddle.net/varit05/t18uggqt/4/

I hope it helps you.

Cheers :)