frankcecca frankcecca - 4 months ago 8
AngularJS Question

Angular select doesn't reflect its model

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

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 :)