title: Two select lists sharing same value binding, slow to update
body: <p>I have two select lists bound to observable arrays containing a different sorting of the same data.  Both of these select list value binding is to the same observableArray.  </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;select id="countriesAZ" data-bind="value: selectedCountry, options: countriesAZ, optionsText: 'Name', optionsValue: 'Id',  optionsCaption: 'Countries a - z'"&gt;&lt;/select&gt;
  
    &lt;select id="countriesByDistance" data-bind="value: selectedCountry, options: countriesDist, optionsText: 'Name', optionsValue: 'Id',  optionsCaption: 'Countries by distance'"&gt;&lt;/select&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var myVM = function() {
      var self = this;
      this.countriesAZ = ko.observableArray([{"Id":1,"Name":"Scotland"},{"Id":2,"Name":"England"},{"Id":3,"Name":"Wales"},{"Id":4,"Name":"N. Ireland"}]);
      this.countriesDist = ko.observableArray([{"Id":1,"Name":"Scotland"},{"Id":2,"Name":"England"},{"Id":3,"Name":"Wales"},{"Id":4,"Name":"N. Ireland"}]);
      this.selectedCountry = ko.observableArray();
  }
  
  window.viewModel = new myVM();
  ko.applyBindings(viewModel);
  </code></pre>
  
  <p>In <a href="http://jsfiddle.net/sHatN/1/" rel="nofollow">this fiddle</a> it all seems to work well and react quickly, however, the actual array has around 1000 items and there is a delay when changing one of the selects.  </p>
  
  <p>I have tried to put a throttle on the value binding but didn't seem to make a difference.  </p>