title: knockoutjs binding to a ko.observableArray of the selected child view model in a main view model
body: <p>in knockoutjs i have a main view model which has a collection of child view models as in the following</p>
  
  <pre><code>//apply binding on document ready
  $( document ).ready(function() {
    ko.applyBindings(new MainviewModel);
  });
  
  //main view model, contains a child view models ko.observableArray
  var MainviewModel = function()
  {
      // ko.observableArray of subviewmodels
      this.subViewModels= ko.observableArray
      ([
          new SubViewModel('A'),
          new SubViewModel('B'),
          new SubViewModel('C')
      ]);
  
      //selected subviewmodel
      this.selectedSubViewModel = ko.observable();
  
      //set slected subviewmodel
      this.selectSubViewModel = function(subviewmodel)
      {
          this.selectedSubViewModel = selectedSubViewModel(subviewmodel);
      }
  };
  
      //child view model, contains ko.observableArray of models
  var SubViewModel = function(key)    
  { 
      this.key = key;   
      //load items from json based on key value...
      //ko.observableArray of subviewmodels
      this.items=ko.observableArray([new Model("car","4 wheels"), new Model("plane","can fly")]);
      //selected model
      this.selectedModel = ko.observable();
      //set selected model
      this.selectModel = function(item)
      {
          this.selectedModel = selectedModel(item);
      }
  };
  
  //model
  var Model = function(word,defention)
  {
      //properties
      this.word = word;
      this.defention = defention;
  };
  </code></pre>
  
  <p>and in my html i have 2 lists changing selection in the first list should change the source of the second list, however when i change selection in list one nothing happens and when i debug in chrome i get <code>Uncaught ReferenceError: selectedSubViewModel is not defined</code></p>
  
  <pre><code>&lt;!--main view model list view--&gt;
  &lt;div class="list-group" data-bind="foreach: subViewModels"&gt;
  &lt;a href="#" class="list-group-item" data-bind="css: {active: $parent.selectedSubViewModel() == $data}, click: $parent.selectSubViewModel.bind($parent)"&gt;
  &lt;h4 class="list-group-item-heading" data-bind="text: key"&gt;&lt;/h4&gt;              
  &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;!--selected sub view model list view--&gt;
  &lt;div class="list-group" data-bind="foreach: selectedSubViewModel.items"&gt;  
       &lt;a href="#" class="list-group-item" data-bind="css: {active: $parent.selectedModel() == $data}, click: $parent.selectModel.bind($parent)"&gt;
       &lt;h4 class="list-group-item-heading" data-bind="text: word"&gt;&lt;/h4&gt;
       &lt;p class="list-group-item-text" data-bind="text: defention"&gt;&lt;/p&gt;
       &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>