title: Angular2 child property change not firing update on bound property
body: <p>I have a simple custom directive with an input, that I'm binding to in my component. But for whatever reason, the ngOnchanges() method doesn't fire when changing a child property of the input property.</p>
  
  <p>my.component.ts</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {MyDirective} from './my.directive';
  
  @Component({
      directives: [MyDirective],
      selector: 'my-component', 
      templateUrl: 'Template.html'
  })
  
  export class MyComponent {
      test: { one: string; } = { one: "1" }
  
      constructor( ) {
          this.test.one = "2";
      }
      clicked() {
          console.log("clicked");
          var test2: { one: string; } = { one :"3" };
          this.test = test2; // THIS WORKS - because I'm changing the entire object
          this.test.one = "4"; //THIS DOES NOT WORK - ngOnChanges is NOT fired=
      }
  }
  </code></pre>
  
  <p>my.directive.ts</p>
  
  <pre><code>import {Directive, Input} from 'angular2/core';
  import {OnChanges} from 'angular2/core';
  
  @Directive({
      selector: '[my-directive]',
      inputs: ['test']
  })
  
  export class MyDirective implements OnChanges {
      test: { one: string; } = { one: "" }
  
      constructor() { }
  
      ngOnChanges(value) {
          console.log(value);
      }
  }
  </code></pre>
  
  <p>template.html</p>
  
  <pre><code>&lt;div (click)="clicked()"&gt; Click to change &lt;/div&gt;
  &lt;div my-directive [(test)]="test"&gt;
  </code></pre>
  
  <p>Can anyone tell me why?</p>