title: How does Angular 2 change detection work?
body: <p>In Angular 1, change detection was by dirty checking the $scope hierarchy. We would implicitly or explicitly create watchers in our templates, controllers or components.</p>
  
  <p>In Angular 2 we no longer have $scope, but we do override setInterval, setTimeout, et al. I can see how Angular might use this to trigger a $digest, but how does Angular determine what has changed, especially given that Object.observe never made it into browsers?</p>
  
  <h2>Example</h2>
  
  <p>Here is a simple example. An object defined in a service is updated in a setInterval. The DOM is recompiled each interval.</p>
  
  <p>How is Angular able to tell that the AppComponent is watching the service, and that the value of an attribute of the service has changed?</p>
  
  <pre><code>var InjectedService = function() {
    var val = {a:1}
    setInterval(() =&gt; val.a++, 1000);
    return val;
  }
  
  var AppComponent = ng.core
    .Component({
      selector: "app",
      template:
      `
        {{service.a}}
      `
    })
    .Class({
      constructor: function(service) {
        this.service = service;
      }
    })
  
  AppComponent.parameters = [ new ng.core.Inject( InjectedService ) ];
  
  document.addEventListener('DOMContentLoaded', function() {
    ng.platform.browser.bootstrap(AppComponent, [InjectedService])
  });
  </code></pre>