frankcecca frankcecca - 7 months ago 27
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:


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


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:

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



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:

I hope it helps you.

Cheers :)