Select/Unselect Checkboxes - KnockoutJs

The Header Checkbox when checked, should check all the child boxes. When the checkbox in header is checked or unchecked, nothing happens. When any checkbox in a row is checked/unchecked, it checks/unchecks all the checkboxes. What is going wrong here.

index.cshtml:

<th>
 <input type="checkbox" data-bind="checked: $root.SelectAll"/>
</th>
<tr>
  <td>
    <input type="checkbox" data-bind="checked: $root.SelectedChoices" />
  </td>
</tr>

JS:

//SelectedChoices is ko.observableArray([])

ViewModel.SelectAll = ko.dependentObservable({
 read: function () {
  return ViewModel.SelectedChoices().length == 
         ViewModel.ClientData().length;                
        },
 write: function (newValue) {
   ViewModel.SelectedChoices(ViewModel.SelectedChoices().length == 
   ViewModel.ClientData().length ? [] :  
   ViewModel.ClientData().slice(0));                
        },
        owner: ViewModel
    });

The logic used is exactly as in http://jsfiddle.net/rniemeyer/kXYuU/, just that, table's used instead of ul-li