title: Dynamically changing ngModel from button presses - Angular
body: <p>I have this code which allows the user to filter by a certain field: </p>
  
  <pre><code>&lt;input type="text" class = "form-control" [(ngModel)]="siteFilter.site_name"&gt;
  &lt;button type="button"  class="btn btn-default"&gt;Address&lt;/button&gt;
  &lt;button type="button"  class="btn btn-default"&gt;Site&lt;/button&gt;
  &lt;button type="button"  class="btn btn-default"&gt;Phone&lt;/button&gt;
  </code></pre>
  
  <p>In the component.ts file: </p>
  
  <pre><code>siteFilter: any = { site_name: '', address:'', phone:'' };
  </code></pre>
  
  <p>I have 3 buttons that should depending on which one is clicked, change the <code>ngModel.xxx</code> so that it will filter by that respective field. </p>
  
  <p>I tried using an array that held the respective fields, and the button clicks would select the index, but then it was just printing out the string value instead of binding it to that model. </p>