[data-model] IE puts [object HTMLInputElement] when encountering this scenario

[bingzer]

[global vars]

var employee = {
 ...
}
var candyTypes = [
 ...
]

[html]

<select data-model="employee.candyType" data-attrs="{disabled: !employee.wantCandy}">
 <option data-foreach="candy in candyTypes" data-attrs="{value: candy}" data-model="candy"></option>
</select>

...

<label data-foreach="candy in candyTypes" style="border: 1px solid gray">
 <input data-model="employee.candyType" type="radio" data-attrs="{name: 'candy', value: candy2, checked: employee.candyType == candy2, disabled: !employee.wantCandy}">
 <span data-model="candy2"></span>
</label>

When clicking on [input=radio]. The option on the select will have value=[HTMLInputElement] rather than the actual value of the selected candy on the [input=radio].

The issue causes by having attribute 'name' on the option element with the same name as the scope variable.

Debugged the whole thing, turned out IE created a global variable named candy with a value of '[HTMLInputElement]'. This causes the option value to be '[HTMLInputElement'] Could not find a code that does this.

: data-foreach.ts:48