I am trying to bind the value of a checkbox to a boolean variable in an object. The checkbox is used inside
of a table. The functionality that I am trying to achieve is that when I click the checkbox, it should toggle the
boolean variable in the object and the result of which would be shown on the html.

I am using the below code to achieve the same:

HTML:

```
<tr *ngFor="let item of getListOfItems(); let i = index">
  <td>{{ i+1 }}</td>
  <td>{{ item.action }}</td>
  <td><input name="chk" type="checkbox" [(ngModel)]="item.isComplete" /></td>
  <td [ngSwitch]="item.isComplete">
    <span *ngSwitchCase="true">Yes</span>
    <span *ngSwitchDefault>No</span>
  </td>
</tr>

```

Component:

```
getListOfItems() {
  var items = [
    new TodoItem('Buy Flowers', false),
    new TodoItem('Get Shoes', false),
    new TodoItem('Collect Tickets', true),
    new TodoItem('Call Joe', false),
  ];

  return items; 
}

```

TodoItem Class

```
export class TodoItem {
    action: string;
    isComplete: boolean;

    constructor(action: string, isComplete) {
        this.action = action;
        this.isComplete = isComplete;
    }
}

```

However, when I run the app, the browser keeps on loading the page and freezes after a period of time.
When I comment this checkbox , everything comes back to normal and the code works fine. Could not figure out a solution. Any help would be appreciated.