title: Angular2 refreshing view on array push
body: <p>I can't seem to get angular2 view to be updated on an array.push function, called upon from a setInterval async operation.</p>
  
  <p>the code is from this <a href="http://plnkr.co/edit/GC512b?p=preview" rel="noreferrer">angular plunkr example of setInterval</a>:</p>
  
  <p>What i'm trying to do is as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {View, Component, bootstrap, Directive, ChangeDetectionStrategy, ChangeDetectorRef} from 'angular2/angular2'
  
  @Component({selector: 'cmp', changeDetection: ChangeDetectionStrategy.OnPush})
  @View({template: `Number of ticks: {{numberOfTicks}}`})
  class Cmp {
    numberOfTicks = [];
    
    constructor(private ref: ChangeDetectorRef) {
      setInterval(() =&gt; {
        this.numberOfTicks.push(3);
        this.ref.markForCheck();
      }, 1000);
    }
  }
  
  @Component({
    selector: 'app',
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  @View({
    template: `
      &lt;cmp&gt;&lt;cmp&gt;
    `,
    directives: [Cmp]
  })
  class App {
  }
  
  bootstrap(App);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;angular2 playground&lt;/title&gt;
    &lt;script src="https://code.angularjs.org/tools/traceur-runtime.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.angularjs.org/tools/system.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.angularjs.org/tools/typescript.js"&gt;&lt;/script&gt;
    &lt;script data-require="jasmine" data-semver="2.2.1" src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.js"&gt;&lt;/script&gt;
    &lt;script data-require="jasmine" data-semver="2.2.1" src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine-html.js"&gt;&lt;/script&gt;
    &lt;script data-require="jasmine@*" data-semver="2.2.1" src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/boot.js"&gt;&lt;/script&gt;
    
    &lt;script src="config.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.angularjs.org/2.0.0-alpha.37/angular2.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      System.import('app')
        .catch(console.error.bind(console));
    &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;app&gt;&lt;/app&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The above code will work properly if "numberOfTicks" is just a number, (as the plunker original example shows) but once I change it to an array and push data, it won't update.</p>
  
  <p>I can't seem to understand why is that.</p>
  
  <p>The following behaviour is similar to an issue I have when trying to update a graph in angular2 with new data points when using setInterval / setTimeout.</p>
  
  <p>Thanks for the help.</p>