title: How to use observable property of an observable array to change display property in UI?
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>this.inviteeEmailList = ko.observableArray([]);
  
  this.status = ko.observable();
  
  var emails = ["hello","test","obseervableArray"];
  
  for(var j in emails)
                  {
                      var emailList = {};
                      emailList.email = emails[j];
                      emailList.status = ko.observable(this.status());
                      this.inviteeEmailList.push(emailList);
                  }
  
  /**
  * after getting response , changing the value of observable to true.
  */
  var done = function()
  {
    var self = this;
    self.status(true);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"&gt;&lt;/script&gt;
  &lt;div id="foundEmail" class="suEmailIdContainer" data-bind="foreach : inviteeEmailList"&gt;
  
              &lt;span data-bind="text:$data.email"&gt;&lt;/span&gt;
              &lt;div data-bind="text:$data.status"&gt;&lt;/div&gt;
  
              &lt;span data-bind="if: $data.status"&gt;
                  &lt;span&gt;success&lt;/span&gt;&lt;br/&gt;
              &lt;/span&gt;
  
              &lt;span data-bind="if: !$data.status"&gt;
                  &lt;span&gt;fail&lt;/span&gt;&lt;br/&gt;
              &lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have an observableArray with an observable property.
  As given here:</p>
  
  <pre><code>for(var j in emails)
  {
      var emailList = {};
      emailList.email = emails[j];
      emailList.status = ko.observable(this.status());
      this.inviteeEmailList.push(emailList);
  }
  </code></pre>
  
  <p>I am sending request to server and after getting response, I am changing the value of the observable (i.e. <code>this.status()</code>) to <code>true</code> or <code>false</code> accordingly.
  In html I am trying to access <code>$data.status</code> inside <code>foreach</code> of <code>inviteeEmailList</code>.</p>
  
  <p>But that value is not reflected in the observable property <code>emailList.status</code>.</p>
  
  <p>Anything I am doing wrong?</p>