title: How observableArray works with options binding
body: <p>Just started learning Knockoutjs from official site , I am pasting the code from step 3 of <a href="http://learn.knockoutjs.com/#/?tutorial=collections" rel="nofollow noreferrer">this</a> excercise. </p>
  
  <p><strong>View</strong></p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;&lt;tr&gt;
          &lt;th&gt;Passenger name&lt;/th&gt;&lt;th&gt;Meal&lt;/th&gt;&lt;th&gt;Surcharge&lt;/th&gt;&lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;&lt;/thead&gt;
  
   &lt;tbody data-bind="foreach: seats"&gt;
      &lt;tr&gt;
     &lt;td&gt;&lt;input data-bind="value: name" /&gt;&lt;/td&gt;
          &lt;td&gt;&lt;select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"&gt;&lt;/select&gt;&lt;/td&gt;
          &lt;td data-bind="text: meal().price"&gt;&lt;/td&gt;
      &lt;/tr&gt;    
  &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;button data-bind="click: addSeat"&gt;Reserve another seat&lt;/button&gt;
  </code></pre>
  
  <p><strong>View Model</strong></p>
  
  <pre><code>// Class to represent a row in the seat reservations grid
  function SeatReservation(name, initialMeal) {
      var self = this;
      self.name = name;
      self.meal = ko.observable(initialMeal);
  }
  
  // Overall viewmodel for this screen, along with initial state
  function ReservationsViewModel() {
      var self = this;
  
      // Non-editable catalog data - would come from the server
      self.availableMeals = [
          { mealName: "Standard (sandwich)", price: 0 },
          { mealName: "Premium (lobster)", price: 34.95 },
          { mealName: "Ultimate (whole zebra)", price: 290 }
      ];    
  
      // Editable data
      self.seats = ko.observableArray([
          new SeatReservation("Steve", self.availableMeals[0]),
          new SeatReservation("Bert", self.availableMeals[0])
      ]);
  
        // Operations
      self.addSeat = function() {
          self.seats.push(new SeatReservation("", self.availableMeals[0]));
      }
  }
  
  ko.applyBindings(new ReservationsViewModel());
  </code></pre>
  
  <p>I would like to know how <code>ko.observableArray</code> works with <code>options</code> binding, how the price row gets updated when dropdown value changes ?</p>
  
  <p>Is it because seats array is  <code>observableArray</code> so the price property remain sync in the <code>UI</code> ?</p>
  
  <p>I even tried debugging in chrome, but  when dropdown value changes no function get's hit.</p>
  
  <p>Any help would be great.</p>