title: Knockout.js: Binding an object as a value in <select> / dropdown
body: <p>Refer to this Fiddle: <a href="http://jsfiddle.net/44AwW/3/" rel="nofollow">http://jsfiddle.net/44AwW/3/</a></p>
  
  <p>After 3 seconds, a new 'Place' gets added to the <code>&lt;table&gt;</code> (as a way to simulate ajax-loaded data).</p>
  
  <p>'Place' is a simple JS object, but two of its properties (City and PlaceType) are objects themselves - each with an 'id' and 'name' property.</p>
  
  <pre><code>var Place = {
      id: 1,
      name: "Paradiso",
      placeType: {
          id: 1,
          name: "Concert Hall"
      },
      city: {
          id: 1,
          name: "Amsterdam"
      },
      address: "Somewhere in the city"
  }
  </code></pre>
  
  <p>When clicking the Edit option, the values from the Place in the grid should be set in the form: the City and Place Type <code>&lt;select&gt;</code>s should show "Amsterdam" and "Concert Hall", respectively, but only the 'name' and 'address' are shown/set.</p>
  
  <p>Now, when I add a new Place through the form itself and the Add button, and I click the Edit link of that just-created Place in the table, all of its properties are indeed set and shown in the form, including the City and PlaceType.</p>
  
  <p>So the Places created through the form and added to the observableArray (and therefore shown on the <code>&lt;table&gt;</code>) have all their property values shown correctly when using the Edit button, but when the Places are added programmatically (as in the fiddle) or through ajax, the City and PlaceType property fail to be set and shown on the form.</p>
  
  <p>What am I missing?</p>