title: Bind viewmodel to ui after ajax call succeeds Knockout
body: <p>I have a selectall toggle checkbox and checkbox in each row of data .</p>
  
  <p>Now the data which is returned from the server doesnt have <code>isSelected</code> Observable. I have added 'isSelected' observable for each row . But the <code>isSelected</code> observable doesnt get bound to  the checkboxes in each row . </p>
  
  <p>Here is the viewmodel : </p>
  
  <pre><code>var folderViewModel = function () {
      var self = this;
      self.Folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
      self.SelectedFolder = ko.observable();
      self.Mails = ko.observableArray([]);
      self.SelectedMail = ko.observable();
      self.SelectAll = ko.observable(false);
  
      self.navigate = function (folder) {
          self.SelectedFolder(folder);
          //$.get('/Api/MailBox', { folder: folder }, self.Mails);
  
          $.ajax({
              url: "/Api/Mailbox",
              data: { folder: folder },
              success: function (data) {
                  ko.mapping.fromJS(data, {}, self.Mails);
                  ko.utils.arrayForEach(self.Mails(), function (mail) {
                      mail.isSelected = ko.observable(true);
                      mail.isSelected.subscribe(function (myvalue) {
                          console.log(myvalue);
                      });
                  });
                  console.log(ko.toJSON(self.Mails()));
              },
              statusCode: {
                  404: function () {
                      alert("No Mail");
                  }
              }
          });
  
          //ko.mapping.fromJS(data, {}, self.Mails);
          //console.log(ko.toJSON(self.Mails));
      };
  
      self.SelectAll.subscribe(function (newValue) {
          ko.utils.arrayForEach(self.Mails(), function (mail) {
              console.log(mail.isSelected());
              mail.isSelected(newValue);
  
          });
          console.log(newValue);
      }, self);
  
      this.navigate("Inbox");
  };
  ko.applyBindings(new folderViewModel());
  </code></pre>
  
  <p>And here is the binding . </p>
  
  <pre><code>&lt;table class="table table-bordered table-striped table-condensed table-hover"&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;
              &lt;input type="checkbox" data-bind="checked: SelectAll"/&gt;
              @*&lt;input type="checkbox" /&gt;*@
          &lt;/th&gt;
          &lt;th&gt;
              From
          &lt;/th&gt;
          &lt;th&gt;
              To
          &lt;/th&gt;
          &lt;th&gt;
              Subject
          &lt;/th&gt;
          &lt;th&gt;
              Date
          &lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody data-bind="foreach:Mails"&gt;
      &lt;tr data-bind="click:$root.navigateToMail"&gt;
          &lt;td style="width: 15px"&gt;
              &lt;input type="checkbox" data-bind="checked: $root.isSelected"&gt;
              @*&lt;input type="checkbox"&gt;*@
          &lt;/td&gt;
          &lt;td data-bind="text: From"&gt;
          &lt;/td&gt;
          &lt;td data-bind="text: To"&gt;
          &lt;/td&gt;
          &lt;td data-bind="text: Subject"&gt;
          &lt;/td&gt;
          &lt;td data-bind="text: MailDate"&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>
  
  <p>The checkbox  <code>&lt;input type="checkbox" data-bind="checked: $root.isSelected"&gt;</code> is not getting bound to the ajax data in <code>mails.isSelected=ko.obsevable(true)</code>. What might be the problem ? </p>