Knockout JS checkbox checked binding

In knockout js, I am trying to perform a foreach on an array of data to display checkboxes. The problem I'm having is that the selected databinding doesn't seem to work until I interact with one of the boxes. For example, below I will generate 5 textboxes, none of which will appear selected. However, when I click on "one", "two" and "four" are also checked as they should be there from the beginning.

Javascript：

var viewModel = {};

viewModel.choices = ["one", "two", "three", "four", "five"];
viewModel.selectedChoices = ko.observableArray(["two", "four"]);

viewModel.selectedChoicesDelimited = ko.dependentObservable(function () {
        return viewModel.selectedChoices().join(",");
    });

ko.applyBindings(viewModel);

HTML：

<ul class="options" data-bind="foreach: choices">
    <li><label><input type="checkbox" name="NotifyMembers" data-bind="checked: $parent.selectedChoices, attr: { value: $data }" /><span data-bind="text: $data"></span></label></li>
</ul>
<hr />
<div data-bind="text: selectedChoicesDelimited"></div>

The fiddle is at : http://jsfiddle.net/bvGG3/1/

thank you for your help.