title: Angular: How to re-bind to previously selected object when list changes
body: <p>By default, when you modify the source list that a <code>select</code> is bound to using <code>ng-options</code>, it clears the selected list item even if that item exists in its entirety in the new list. I figure there may be a way to tell angular that if they have the same <code>WhateverKey</code> property, then consider them the same item and don't de-select. Is there a way to do this?</p>
  
  <p>In the example below, selecting a new customer re-binds (think: re-downloads) the list of possible locations, but the selected location (<code>$scope.Location</code>) still exists in the new list, and thus user experience intuition says it should be selected.</p>
  
  <p><strong>I understand the problem is that it's literally a different reference object with a different angular object key.</strong> I'm asking how to auto-rebind based on a property of the object (in this case, <code>LocationKey</code>) without resorting to looping through JavaScript to find the corresponding object in the new list manually.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function Ctrl($scope) {
    $scope.Customers = [{CustomerKey: 1, CustomerCode: 'Customer1'},
                        {CustomerKey: 2, CustomerCode: 'Customer2'},
                        {CustomerKey: 3, CustomerCode: 'Customer3'}];
    $scope.Locations = [{LocationKey: 1, LocationCode: 'Location1'},
                        {LocationKey: 2, LocationCode: 'Location2'},
                        {LocationKey: 3, LocationCode: 'Location3'}];
    $scope.Customer = $scope.Customers[0];
    $scope.Location = $scope.Locations[0];
                        
    $scope.SelectCustomer = function() {
      $scope.Locations = angular.copy($scope.Locations);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  
  &lt;div ng-app ng-controller="Ctrl"&gt;
    &lt;select ng-model="Customer"
            ng-options="c as c.CustomerCode for c in Customers"
            ng-change="SelectCustomer()"&gt;&lt;/select&gt;
    &lt;select ng-model="Location"
            ng-options="l as l.LocationCode for l in Locations"&gt;&lt;/select&gt;
    &lt;div ng-bind="'Customer: ' + Customer.CustomerCode"&gt;&lt;/div&gt;
    &lt;div ng-bind="'Location: ' + Location.LocationCode"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>