knockout.js - チェックボックスの状態がモデルから UI に正しく伝達されない

Question

ノックアウト バインディングを使用している UI で面白いことが起こっています。

Ui は次のように定義されます。

<ul id="items" data-bind="foreach: items">
    <li>        
        <input type="checkbox" data-bind="checked: $root.selectedItems, value: $data, click: $root.itemsChanged"/>
        <label data-bind="text: $data"></label>
    </li>
</ul>

<div data-bind="foreach: selected">
    <p data-bind="text:$data"></p>
</div>

head 部分に含まれる Js は次のようになります。

function ViewModel(items) {
    var self = this;
    self.items = ko.observableArray(items);
    self.selectedItems = ko.observableArray([]);
    self.itemsChanged = function () {
        self.selected.removeAll();
        self.selectedItems().forEach(function (e) {
            self.selected.push(e);
        });
    };
    self.selected = ko.observableArray([]);
}

var model = new ViewModel(['Read paper', 'Clear room', 'Cook food', 'Buy rice']);
window.onload = function () {
    ko.applyBindings(model);
};

私が期待すること:最初のチェックボックスをチェックすると、チェックされた状態が表示され、チェックされた項目が div に正しく取り込まれるはずです。

私が観察したこと：最初のチェックボックスをチェックすると、チェックされません。しかし、以下の div は正しく設定されています。別のチェックボックスをオンにすると、最初にクリックされたチェックボックスがオンになります。クリックされたものはチェックされません。ただし、div は項目を反映しています。

私は何か間違ったことをしていますか？

使用するフィドル: http://jsfiddle.net/deostroll/BNfKF/