title: Component binding not working
body: <p>I have an <code>address</code> component, a <code>combinedAddress</code> component, and a component that calls these.  For some reason the model binding is not getting into the <code>address</code> component.</p>
  
  <p>Current debugging HTML in outer component - street displays a prepopulated value of <code>123</code>:</p>
  
  <pre><code>Entity: {{application.entity.physicalAddress.street}}
  &lt;combinedAddress-component [(physicalAddress)]="application.entity.physicalAddress" [(mailingAddress)]="application.entity.mailingAddress" &gt;&lt;/combinedAddress-component&gt;
  &lt;address-component name="something" [(address)]="application.entity.physicalAddress" Title="Something"&gt;&lt;/address-component&gt;
  </code></pre>
  
  <p>HTML for <code>combinedAddress</code> - street displays prepopulated value of <code>123</code>:</p>
  
  <pre><code>&lt;div&gt;
      CombinedAddress: {{physicalAddress.street}}, {{mailingAddress.street}}
      &lt;div&gt;
          &lt;address-component name="physicalAddress" [(address)]='physicalAddress' Title="Physical Address"&gt;&lt;/address-component&gt;
      &lt;/div&gt;
      &lt;div *ngIf="isMailingAddressRequired()"&gt;
          &lt;address-component name="mailingAddress" [(address)]="mailingAddress" Title="Mailing Address"&gt;&lt;/address-component&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>HTML for <code>address</code> component - Title displays, but the address line displays nothing.  If you type in the address textbox, the address updates.</p>
  
  <pre><code>&lt;div class="well"&gt;
      &lt;fieldset&gt;
          Address: {{address.street}}
          &lt;legend&gt;{{Title}}&lt;/legend&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="address"&gt;Address&lt;/label&gt;
              &lt;input name="address" class="form-control" [(ngModel)]="address.street" required placeholder="Address" #address="ngModel" /&gt;
              &lt;div *ngIf="address.dirty &amp;&amp; !address.valid" class="error"&gt;*    &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;label for="city"&gt;City&lt;/label&gt;
              &lt;input name="city" class="form-control" [(ngModel)]="address.city" placeholder="City" #city="ngModel" /&gt;
              &lt;div *ngIf="city.dirty &amp;&amp; !city.valid" class="error"&gt;*&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;state-select [(selectedState)]="address.state" Title="State"&gt;&lt;/state-select&gt;
  
          &lt;div class="form-group"&gt;
              &lt;label for="zip"&gt;Zip Code&lt;/label&gt;
              &lt;input name="zip" class="form-control" [(ngModel)]="address.zip" placeholder="Zip Code" #zip="ngModel" /&gt;
              &lt;div *ngIf="zip.dirty &amp;&amp; !zip.valid" class="error"&gt;*&lt;/div&gt;
          &lt;/div&gt;
      &lt;/fieldset&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the TS for the <code>address</code> component</p>
  
  <pre><code>import { Component, Input, ElementRef} from '@angular/core';
  import { Address } from '../../models/Address';
  import { StateComponent } from './states.component';
  let $ = require('../../../../../../node_modules/jquery/dist/jquery.min.js');
  
  @Component({
      selector: 'address-component',
      templateUrl: 'app/views/reusables/address.component.html',
      styleUrls: ['app/form/reusables/composite.component.css'],
      directives: [StateComponent]
  })
  export class AddressComponent{
      @Input()
      Title: String;
  
      @Input()
      address: Address;
  }
  </code></pre>