title: why is setting observable in knockout.js not working
body: <p>I'm trying to explicitly set a default value on some observables, but after setting them and checking their values they return undefined. What am I doing wrong?</p>
  
  <p>Interestingly the selectedCustomerType is set as expected, however the other 2 variables, selectedPlatform and selectedPricing are null. What is my silly mistake?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset='utf-8'&gt;
    &lt;script src='static/javascript/jquery-1.9.1.js'&gt;&lt;/script&gt;
    &lt;script src='static/javascript/knockout-3.0.0.js'&gt;&lt;/script&gt;
    &lt;script src='static/javascript/merchant.js'&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div&gt;
      &lt;span id='customer_types' data-bind='foreach: availableCustomerTypes()'&gt;
        &lt;input data-bind='value: value, checked: $root.selectedCustomerType'&gt;
        &lt;span data-bind='text: label'&gt;&lt;/span&gt;
      &lt;/span&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;select id='merchant_platforms'
              data-bind='options: availablePlatforms(),
                         optionsText: "label",
                         optionsValue: "value",
                         value: selectedPlatform'&gt;
      &lt;/select&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;select id='merchant_pricings'
              data-bind='options: availablePricings(),
                         optionsText: "label",
                         optionsValue: "value",
                         value: selectedPricing'&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var MerchantModel = function() {
    var self = this;
  
    self.merchant = ko.observable();
  
    self.availableCustomerTypes = ko.observableArray([]);
    //    {'label': 'Red', 'value': 'R'},
    //    {'label': 'Blue', 'value': 'B'}
    //]);
    self.availablePlatforms = ko.observableArray([]);
    self.availablePricings = ko.observableArray([]);
  
    // was originally setting default values here, but this gets blown away after
    // ko.applyBindings() gets called in the $(document).ready() function below
    self.selectedCustomerType = ko.observable();
    self.selectedPlatform = ko.observable();
    self.selectedPricing = ko.observable();
  
    // load data
    self.load = function() {
      self.setDefaults();
  
      // load UI lookup lists asynchronously, etc...
    };
  
    self.setDefaults = function() {
      self.selectedCustomerType('R');   
      self.selectedPlatform('Tango');
      self.selectedPricing('Credit Plus');
  
      // calling self.selectedCustomerType() returns 'A' as expected
      // calling self.selectedPlatform() returns undefined?? Why?
      // calling self.selectedPricing() returns undefined?? Why?    
    };
  }
  
  // activate knockout.js
  $(document).ready(function() {
    var merchantModel = new MerchantModel();
    ko.applyBindings(merchantModel);
  
    // load initial data via ajax (in this case just UI lookup lists, etc...)
    merchantModel.load();
  });
  </code></pre>