Select tag with ng-options loses binding


#1

Hi,
I have a select tag that I populate with ng-options and bind it to $scope.location:
<select ng-model="location" ng-change="updateLocation(location)" ng-options="loc.name for loc in locations"><!-- track by location.name"--> </select> </label>

Initially I have: $scope.location = $scope.locations[0]

ng-change on the select tag updates the $scope.location which is supposed to be done by reference [http://stackoverflow.com/questions/28913317/angularjs-select-not-binding-when-using-value-as-value-syntax], so I do this :
for(var i=0; i<$scope.locations.length;i++){ if($scope.nearbyLocation.location.name==$scope.locations[i].name){ $scope.location = $scope.locations[i] } }

I also have a modal (nearest location) that also updates the $scope.location done by reference the same way as above.

So in my mind all binding of $scope.location is done by reference.

But it doesnt work… If i start the code and go straight to chosing an option in the modal, then the select tag updates. :slight_smile:
If I start the code and make a choice from the select tag, and then go to the modal to chose another option, then the select tag does not update :cry:- yet the $scope.location is changing.

I made an example of this problem on codepen: http://codepen.io/nubble/pen/VaJQEW

Any help would be greatly appreciated.

Thanks
Jason