title: Observable array where each item in array contains an array - how to make the inner array observable
body: <p><strong>Issue</strong>:  I have Json coming back from the server.   The Json is an array of businesses where each business can have multiple contacts.  I want to make the contacts an observable array also, so that html elements bound to the contacts get updated upon deletion and the array gets updated upon editing.</p>
  
  <p>I've setup the following jsFiddle - <a href="http://jsfiddle.net/rdotlee/GCwjX/1/" rel="nofollow">http://jsfiddle.net/rdotlee/GCwjX/1/</a>.</p>
  
  <p>Here is my view model from the jsFiddle.  </p>
  
  <pre><code>    var businessViewModel =
  {
      allBusinesses: ko.observableArray([
                                          { name: "Biz1", id: 1, Contacts: [{ name: "Joe", email: "test@test", phone: "555-111-1111" }, { name: "Smith", email: "smith@test", phone: "777-111-2223"}] },
                                          { name: "Biz2", id: 2, Contacts: [{ name: "Joe", email: "test@test", phone: "555-222-1111" }, { name: "Smith", email: "smith@test", phone: "555-111-2222"}] }
                                        ]),
  
      businessId: ko.observable(1)
  
  };
  
  businessViewModel.selectedBusiness = ko.dependentObservable(function () {
      var biz = this.allBusinesses()[0];
  
      for (var i = 0; i &lt; this.allBusinesses().length; i++) {
          if (this.allBusinesses()[i].id == this.businessId()) {
              biz = this.allBusinesses()[i];
              break;
          }
      }
      return biz;
  }, businessViewModel);
  
  businessViewModel.removeContact = function (contact) {
      ko.utils.arrayRemoveItem(this.selectedBusiness().Contacts, contact);
      ko.applyBindings(businessViewModel, $("#sectionBusinesses")[0]);
  } .bind(businessViewModel);
  </code></pre>
  
  <p>What is the cleanest / recommended way to do what I need?</p>
  
  <p>Thanks,</p>