arrays - テーブルのノックアウト更新セル値

Question

列 B の選択を変更すると、列 A のテキストも変更されるはずですが、変更されません。なんで？

HTML:

    <table>
    <thead>
        <tr>
            <th style="width: 100px;">A</th>
            <th style="width: 100px;">B</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: Data">
        <tr>
            <td><span data-bind="text: idOpt"></span></td>
            <td><select data-bind="options: $root.MyOptions, optionsText: 'name', optionsValue: 'id', value: idOpt"></select></td>
        </tr>
    </tbody>
</table>

JS:

function AppViewModel() {
   var self = this;
   self.MyOptions = ko.observableArray([
       {id: 'a1', name: 'One'},
       {id: 'a2', name: 'Two'},
       {id: 'a3', name: 'Three'}
   ]);

   self.Data = ko.observableArray([
       {idOpt: 'a1'},
       {idOpt: 'a2'},
       {idOpt: 'a1'}
   ]);
}

var vm = new AppViewModel();
ko.applyBindings(vm);

http://jsfiddle.net/bnowicki/CrVBr/2/

助けてください。