title: Knockout nested observableArray not binding
body: <p>I have looked at a few related searches on similar issues but it doesn't matter how close I try to match the working result I cannot seem to figure out what is wrong with the following code.</p>
  
  <pre><code>&lt;div data-bind="foreach: collections" &gt;
      &lt;div data-bind="text:name,click: $data.AddToCollectionB"&gt;
          &lt;div data-bind="foreach: collectionB" &gt;
          &lt;input type="text" data-bind="value: name"&gt;
          &lt;/div&gt;                   
      &lt;/div&gt;
  &lt;/div&gt;
  
  var kt = kt || {};
  
  kt.itemA= function(n) {
      var self = this;
      self.name = n.name;
      self.collectionB = ko.observableArray(n.colB);
  
      self.AddToCollectionB = function () {
      self.collectionB.push(kt.itemB({ name: 'test-nested sub item' }));
      alert(self.name);
      alert(self.collectionB().length);
      };
  };
  
  kt.itemB= function(n) {
      var self = this;
      self.name = ko.observable(n.name);
  };
  
  kt.vm= new (function() {
      var self = this;
      self.collections= ko.observableArray([new kt.itemA({name:'item 1', colB: [new kt.itemB({name:'sub-item'})]}),new kt.itemA({name:'item 2', colB: []})]);
  });
  
  ko.applyBindings(kt.vm);
  </code></pre>
  
  <p>Could anyone please point out what I am doing wrong?</p>
  
  <p>jsFiddle link: <a href="http://jsfiddle.net/L7uxh/31/" rel="nofollow">http://jsfiddle.net/L7uxh/31/</a></p>
  
  <p>Thanks,</p>