AngularJS: Select not 2-way binding to model

Question

I am using a select to show Client names. A user should be able to select an existing client, which will then update the scope property:

Controller

Initializing the "first pick".

if($scope.clients.length > 0) $scope.existingClient = $scope.clients[0];

View

<select
    id='nm-existing-client-name'
    class='form-control  input-lg'
    ng-model='existingClient'
    ng-options="client.name for client in clients">
</select>

The scope property existingClient does not change when the select menu changes. If no value is initialized (controller line above is removed), the value of existingClient will stay undefined.

Attaching an ng-change will fire when a value changes, but the model itself will not update to the new value.

I am using AngularJS v1.2.0-rc.3.

Seems to work just fine if it's as simple as this demo. I'd say there is something else interfering with your code. — Yoshi
– Yoshi, Commented Oct 16, 2013 at 16:47
@Yoshi I figured as much. I'm not seeing any errors thrown in the console. I will do some deeper debugging now that I can see I am using ng-options/ng-model correctly. — Tyler Shaddix
– Tyler Shaddix, Commented Oct 16, 2013 at 16:59

hpaknia · Accepted Answer · 2018-04-27 21:46:24Z

125

I think you are probably using a child scope and don't know it. ng-if, ng-repeat, ng-switch and ng-include all create child scopes. Values on your scope are inherited, but if you change the value in a child scope it sets a value on the child scope and leaves the inherited value unchanged on the parent. Try using an object instead to hold your values and see if that fixes it. Since you are only setting a property on an object and not a value directly on the scope it will use the parent scope's inherited object and update the value.

$scope.data = {
    existingClient: $scope.clients.length > 0 ? $scope.clients[0] : undefined
};

View:

<select ng-model="data.existingClient" 
        ng-options="client.name for client in clients">
</select>

You can use the AngularJS Batarang extension in chrome to help debug your scopes.

edited Apr 27, 2018 at 21:46

hpaknia

3,1285 gold badges37 silver badges72 bronze badges

answered Oct 16, 2013 at 18:05

Jason Goemaat

29.3k15 gold badges89 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Tyler Shaddix Over a year ago

I was using an ng-if in a higher block, which was creating a new scope. Thank you for the help.

Anoop Isaac Over a year ago

I was having my select inside ng-include which created a new scope, your solution worked

Jason Goemaat Over a year ago

ng-switch creates a new scope also, as does ng-repeat.

Dave Romero Over a year ago

Wow, this insight was incredibly helpful. This is hard to diagnose when Angular implicitly creates a child scope. Thank you.

hipnosis Over a year ago

If it helps anyone, I found my scope was nested two levels deep. Try ng-model="$parent.$parent.myVariable" to see. What is the advantage of creating a child scope?

|

Kamil Szot · Accepted Answer · 2014-07-04 13:23:44Z

1

This is also a solution to keep parameters into your $scope object:

controller:

$scope.scope = $scope;
$scope.clients = [];
$scope.existingClient = $scope.clients.length > 0 ? $scope.clients[0] : undefined;

view:

<select ng-model="scope.existingClient" ng-options="client.name for client in clients"></select>

edited Jul 4, 2014 at 13:23

Kamil Szot

17.9k8 gold badges66 silver badges67 bronze badges

answered Feb 7, 2014 at 13:27

Chris

6,6911 gold badge25 silver badges27 bronze badges

2 Comments

geeky_monster Over a year ago

This didnt really help.

Chris Over a year ago

Do you realize that this answer is 3 years old? xD

Collectives™ on Stack Overflow

AngularJS: Select not 2-way binding to model

2 Answers 2

10 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related