How to make AngularJS TODO example work in IE9 the same as it works in IE8, Chrome, Firefox?

Problem

I did follow Angular JS TODO example and posted my code on JSFiddle (with AngularJS v1.0.3): http://jsfiddle.net/7w689/

I cannot figure out why it doesn’t work in IE9 as expected. It works in IE8, Chrome and Firefox but does have a different behavior in IE9 as described below.

Observed behavior in IE8, Chrome and Firefox: When page is loaded first time clicking on any TODO checkbox in the TODO list will modify CSS class for TODO item (.done-true versus .done-false) and will update “Remaining todos” number.

Observed behavior in IE9: When page is loaded first time clicking on any TODO checkbox in the TODO list will NOT modify CSS class for TODO item (.done-true versus .done-false) and will NOT update “Remaining todos” number. Only after each item in the list is checked and unchecked several times it will start working. Unclear why this is happening and how to make it behave the same in IE9 as in IE8 and other browsers.

One can reproduce this behavior by using Development Tools in IE9 and selecting Browser Mode: IE9, Document Mode: IE9 standards (versus Document Mode: IE8 standards).

HTML:

<div ng-app>        
<div ng-controller="TodoCtrl">

<span>Total number of todos: {{todos.length}}</span><br />
<span>Remaining todos: {{(todos | filter: {done: false} ).length}}</span><br />

<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done" id="chk{{$index}}"/>
<label for="chk{{$index}}" ng-class="{'done-true': todo.done, 'done-false': !todo.done}">
{{todo.text}} | {{todo.done}}
</label>
</li>
</ul>

<form>
<input type="text" ng-model="todoText"
size="30" placeholder="add new todo here"/>
<button ng-click="addTodo()">Add</button>
</form>

</div>
</div>

JS:

function TodoCtrl($scope) {

$scope.todos = [
{ text: 'task 1', done: true },
{ text: 'task 2', done: false }
];

$scope.addTodo = function ()
{
$scope.todos.push({ text: $scope.todoText, done: false });
$scope.todoText = "";
};

}

CSS:

.done-true {text-decoration: line-through;  color: grey;}
.done-false {text-decoration: none; color: red;}

Problem courtesy of: Daniel

Solution

For some reason you need to have the bound elements within the form tag, otherwise they will only update after you have interacted with them.

See updated jsfiddle

<form>angular elements here</form>

Solution courtesy of: tocallaghan

View additional discussion.

Like what you read? Give Angular.js Recipes a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.