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.

Answer 1

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.