title: Set item name from combobox to knockout list
body: <p>I have one issue displaying value from combobox to knockout list.
  Please image below where i am selecting item from combobox. When i select item from combobox it updates all the rows with same value.
  <img src="https://i.stack.imgur.com/CFBeh.png" alt="List with same values"></p>
  
  <p>The list on left hand side doesnt store name from combobox in database but it stores id. So combobox and list is connected with column called Status. In my html i have defined list as below where ChangeControlName is the one which i want to bind to list</p>
  
  <pre><code>&lt;tbody data-bind="foreach: versionDataByProduct"&gt;
  
      &lt;tr data-bind="click: $root.EditVersionDetail, css: { selected: isSelected}"   &gt;
  
          &lt;td data-bind="text: Name "&gt;&lt;/td&gt;
          &lt;td data-bind="text: Code"&gt;&lt;/td&gt;
          &lt;td data-bind ="text: PlatformVersionName"&gt;&lt;/td&gt;
          &lt;td data-bind ="text: ChangeControlName"&gt;&lt;/td&gt;
        &lt;/tr&gt;                 
  </code></pre>
  
  <p></p>
  
  <p>The combox is loaded as below in my viewmodel</p>
  
  <pre><code>     // Load Change Control List
      function loadChangeControlList() {
          $.ajax({
              url: "../RestService/Product/ChangeControlList",
              type: "PUT",
              contentType: 'application/json',
              processData: false,
              error: function (XMLHttpRequest, textStatus, errorThrown) {
  
              },
              success: function (allData) {
                  var mappedChangeControls = $.map(allData, function (item) {
  
                      return new changeControlList(item);
                  });
                  self.ChangeControls(mappedChangeControls);
  
              }
          });
      }
  </code></pre>
  
  <p>I have binded my combobox in html as below</p>
  
  <pre><code>&lt;td&gt;&lt;select id="selModuleType"  data-bind="options: $root.modules,  optionsCaption: 'Please select Module...' , value: $root.editModuleId , optionsText: 'ModuleName'" /&gt;&lt;/td&gt;
  </code></pre>
  
  <p>When i select row on left hand side shown in image above i get selectedrow. On subscribe event of value editModuleId  i try to assign value to selected row as below. </p>
  
  <pre><code>self.editChangeControl.subscribe(function (value) {
          if (!value) {
              return;
          }
  
          self.selecteditem().ChangeControlId(value.Status());
  
          self.selecteditem().ChangeControlName(value.ChangeControl());
  
      });
  </code></pre>
  
  <p>In the code above selecteditem contains the row we selected. ChangeControlId as you can see above in the code is the id of value we select from combobox and this is set correctly to the list. But name is not set correctly. The reason being that ChangeControlId is stored in database. The ChangeControlId is part of table from where these rows are shown. ChangeControlName i want for just display purpose. What should i do? I also tried using computed observable but it shows as "object object" in the list. I used computed observable as below</p>
  
  <pre><code>       this.ChangeControlName = ko.computed({
              read: function () {
                  debugger;
                  return ko.utils.arrayFirst(self.ChangeControls(), function (item) {
                      if (item.Status() === productVersionId.ChangeControlId()) {
                          return item.ChangeControl();
                      }
                  });
              },
  
              write: function (value) {
                  console.log("Value i get " + value);
                  return value;
              }
          });
  </code></pre>