title: How to make angularJS ng-model work with objects in select elements?
body: <p>I have a problem with ng-model on a <code>select</code> element when passing an object from <code>option</code> elements. So, imagine we have an array of columns from a table called <code>columns</code> (the table's definition) and we'd like to creat some filters upon this definition</p>
  
  <pre><code>var columns = [
    {name: 'Account ID',    type: 'numeric'},
    {name: 'Full name',     type: 'text'},
    {name: 'Date of birth', type: 'date'},
    {name: 'Active',        type: 'boolean'}
    // and so on
  ];
  
  var filters = [{}];
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="form-field" ng-repeat="filter in filters"&gt;
    &lt;select ng-model="filter"&gt;
      &lt;option value="" disabled&gt;Choose filter&lt;/option&gt;
      &lt;option ng-repeat="column in columns" ng-value="column"&gt;{{column.name}}&lt;/option&gt;
    &lt;/select&gt;
    &lt;input type="text" ng-model="filter.value"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see, I'd like that <code>filter</code> to get the value of <code>column</code> and to add specific data in it, so at a certain moment, my filter could be like:</p>
  
  <pre><code>[
    {name: 'Account ID', type: 'numeric', value: 123},
    {name: 'Active', type: 'boolean', value: 'Yes'}
  ]
  </code></pre>
  
  <p>Anyway, I'm not sure this is the way of doing this, but I'd like to know how can I achieve this behavior, withour writing to much js code in the controller.</p>
  
  <p>I did some workaround to get this done using <code>ng-change</code>, passing the <code>filter</code> and the <code>column.name</code>, find the column in the <code>columns</code> array, get the <code>type</code> property, update the <code>filter</code>, but I really think that there is a simpler answer to this.</p>