title: Two-way binding with @Input
body: <p>I'm attempting to build a very simple component in Angular 2.0, a custom dropdown called <code>&lt;my-select&gt;</code>. </p>
  
  <p>I am passing <code>model</code> into <code>&lt;my-select&gt;</code>, which I am expecting to be updated when the end-user chooses an option from the dropdown. </p>
  
  <p><strong>Plunker</strong>: <a href="http://plnkr.co/edit/iY1hG0q9rsgrR6ltKXW4?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/iY1hG0q9rsgrR6ltKXW4?p=preview</a></p>
  
  <p>As we can see from the Plunker, only the <code>model</code> object local to <code>&lt;my-select&gt;</code> is being updated, not the <code>model</code> object I passed in from <code>&lt;app&gt;</code>. What am I missing here? How does one two-way bind to a custom component? </p>
  
  <p>In Angular 1.x, this was as simple as passing a variable into the <code>$scope</code> of the <code>directive</code> using <code>=</code>.</p>
  
  <p><a href="https://i.stack.imgur.com/5Qdus.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5Qdus.png" alt="enter image description here"></a></p>