title: Knockout Updating ViewModel Radiobox change
body: <p>Scenario.
  I have a radio list of lookup objects from the database. When a different radio button is selected, I need to update the text on the screen.  I have managed to update the value but I can't manage to update the display. What would be the best method to do this?</p>
  
  <p>Here is the jsfiddle:
  <a href="http://jsfiddle.net/CassiusKillay/P42fA/" rel="nofollow">http://jsfiddle.net/CassiusKillay/P42fA/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div data-bind="foreach: workExperienceLookupList"&gt;
  &lt;li&gt; 
      &lt;input data-bind="attr: {value: Id}, checked: $root.WorkExperienceType.Id" type="radio" name="WorkExperienceType" /&gt; 
      &lt;span data-bind="text: Description"&gt; &lt;/span&gt;
  &lt;/li&gt;
  &lt;/div&gt;   
  &lt;span data-bind="text: WorkExperienceType.Id"&gt;&lt;/span&gt;
  &lt;span data-bind="text: WorkExperienceType.Description"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>function ViewModel() {
  this.WorkExperienceType = new Lookup(initialLookup); //From database
  this.workExperienceLookupList = lookupList; //From database
  }
  
  function Lookup(data) {
  this.Id = ko.observable(data.Id);
  this.Description = ko.observable(data.Description);
  this.EnDescription = data.EnDescription;
  this.CyDescription = data.CyDescription;
  this.IsActive = data.IsActive;
  this.SortOrder = data.SortOrder;
  }
  
  var lookupList = [{
  "Id": 1,
  "Description": "Description 1"
  }, {
  "Id": 2,
  "Description": "Description 2"
  }, {
  "Id": 3,
  "Description": "Description 3"
  }, {
  "Id": 4,
  "Description": "Description 4"
  }];
  
  var initialLookup = {
  "Id": 3,
  "Description": "Description 3",
  };
  
  ko.applyBindings(new ViewModel());
  </code></pre>