Angular2 refreshing view on array push : <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>
