title: Angular update model data maintain selected option in select list
body: <p>I am new to Angular and trying to work with a Product object. The Product object contains many Sku objects within it.</p>
  
  <p>A user can use my app to fetch a product, which returns the Product object, containing Sku objects within it. When the Product object is returned, it's set equal to the <code>$scope.product</code> variable like this:</p>
  
  <pre><code>var app = angular.module('app', []);
  
  app.controller('AppController', ['$scope', '$http', function($scope, $http){
  
      $scope.product;
  
      //this will contain the selected sku model that's selected in the dropdown
      $scope.selectedSku;
  
      /*
      * Get a product and all of it's data from the server
      */
      $scope.getProduct = function(){
              $http.post('get_product', {product_id: $scope.extProductId}).
              success(function(product){
                      $scope.product = product;
              }).
              error(function(data){
                      console.log('something went wrong');
              });
      };
  </code></pre>
  
  <p>As you can see, there is an additional variable called <code>$scope.selectedSku</code>. This variable holds the Sku object currently selected in the select list.  The select list looks like this:</p>
  
  <pre><code>&lt;select class="form-control input-lg" ng-model="selectedSku" ng-options="sku.sku for sku in product.skus"&gt;
      &lt;option value=""&gt; -- Select SKU -- &lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>There are certain points during the users interaction with the app, that I want to re-fetch the Product object from the server. When I do this, I again set the result to <code>$scope.product</code>, just as before.  However, when I do this, the select list is no longer has the correct option selected.  Instead it goes back to showing the `"-- Select SKU --" option.</p>
  
  <p>I'm assuming this is because the underlying data is being replaced with a new Product object.  Is there any way for Angular to maintain this connection to the selectedSku when the Product object is re-fetched?</p>
  
  <p>Or, is the solution to keep track of the ID of the selected SKU, and then programmatically reselect that SKU after the Product is re-fetched?</p>
  
  <p>The Product object, which contains the Sku objects, looks like this:</p>
  
  <pre><code>{
      id: 1,
      name: "Product Name",
      skus: [
          {
              id: 1,
              name: "Sku 1 Name",
          },
          {
              id: 2,
              name: "Sku 2 Name"
          }
      ]
  }
  </code></pre>