title: Angular 2 Error trying to diff '3' when trying to add element to array
body: <p>list.component</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Todo } from '../model/todo';
  import { TodoDetailComponent } from './detail.component';
  import { TodoService } from '../service/todo.service';
  
  
  @Component({
      selector: 'my-todos',
      styleUrls: ['/app/todo/styles/list.css'],
      templateUrl:'/app/todo/templates/list.html',
      directives: [[TodoDetailComponent]],
      providers: []
  })
  
  export class ListComponent implements OnInit {
      public todos: Todo[];
      title = 'List of Todos';
      selectedTodo: Todo;
      newTodo: string;
  
      constructor(private todoService: TodoService) {
  
      }
      ngOnInit() {
          this.getTodos();
      }
      addTodo() {
          this.todoService.addTodo(this.newTodo).then(
              todos =&gt; this.todos = todos
          );
      }
      getTodos() {
          TodoService.getTodos().then(
              todos =&gt; this.todos = todos
          );
      }
      onSelect(todo: Todo) {
          this.selectedTodo = todo;
      }
  }
  </code></pre>
  
  <p>todo.service</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Todo } from '../model/todo';
  import { TODOS } from './mock-todos';
  
  @Injectable()
  export class TodoService {
      static getTodos() {
          return Promise.resolve(TODOS).then(
              todos =&gt; todos
          );
      }
      getTodo(id: number) {
          return Promise.resolve(TODOS).then(
              todos =&gt; todos.filter(todo =&gt; todo.id === id)[0]
          );
      }
      addTodo(task: string) {
          return Promise.resolve(TODOS).then(
              todos =&gt; todos.push(new Todo(TODOS.length+1, task))
          );
      }
  }
  </code></pre>
  
  <p>I get this error when calling <code>addTodo()</code> from the component:</p>
  
  <p><img src="https://i.stack.imgur.com/Q7hGA.png" alt="Angular 2 Error trying to diff &#39;3&#39; when trying to add element to array"></p>
  
  <p>I have gone over it several time and still have no clue what's going on. </p>
  
  <p>Here's the definition of <code>TODOS</code>:</p>
  
  <pre><code>import { Todo } from '../model/todo';
  
  export var TODOS: Todo[] = [
      { id: 1, task: 'Do something' },
      { id: 2, task: 'Do something else' }
  ];
  </code></pre>
  
  <p>I have a button that triggers the <code>addTodo()</code> in the template. </p>