I have two sections of code.

Code #1:

<select data-bind="options: operatingSystems,
        optionsText: function (item) {
            return item.Name
        },
        value: selectedOperatingSystem"></select>

Code #2:

<script type="text/html" id="os-template-detail">
    <option data-bind="text: Name" class="body-text"></option>
</script>
<select data-bind="value: selectedOperatingSystem,
        template: { name: 'os-template-detail', foreach: operatingSystems }"></select>

Both shows data from json correctly. With code #1, it updates the value when I select an item on the list while code #2 does not update anything when I change the item.

I am pretty new to Knockout.js and have no idea why Code #2 doesn't work. Is it the limitation of Knockout that preventing me from using template and value at the same time?