title: AngularJS: Multi column Dropdown list
body: <p>I want to create a dropdown list which will carry multiple columns in tabular form. Let say dropdown with columns as Id, Result, Count. It tried using ui.select options however it doesnt work well when deployed in production. Can anyone help me ? Please suggest alternatives if any.</p>
  
  <p>Please find the sample code which I am referring to. and the link referred is
  <a href="http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview" rel="nofollow">http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview</a></p>
  
  <pre><code>&lt;ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;"&gt;
      &lt;ui-select-match placeholder="Select a person in the list or search his name/age..."&gt;{{$select.selected.name}}&lt;/ui-select-match&gt;
      &lt;table style="table table-bordered" cellspacing="0" cellpadding="10" width="280px"&gt;
          &lt;tr class="reportHeader"&gt;
  &lt;td align="left" style="width:50px"&gt;ID&lt;/td&gt;
  &lt;td align="right" style="width:10px"&gt;&lt;/td&gt;
  &lt;td align="left" style="width:160px"&gt;Name&lt;/td&gt;
  &lt;td  align="right" style="width:60px"&gt;Records&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
      &lt;ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}"&gt;      
        &lt;table cellspacing="0" cellpadding="10" width="280px"&gt;
          &lt;tr&gt;
            &lt;td align="left" style="width:100px"&gt;{{person.name}}&lt;/td&gt;
            &lt;td align="left" style="width:10px"&gt;&lt;/td&gt;
            &lt;td align="left" style="width:200px"&gt;{{person.email}}&lt;/td&gt;
            &lt;td align="left" style="width:10px"&gt;&lt;/td&gt;
            &lt;td align="left" style="width:60px"&gt;&lt;span ng-bind-html="''+person.age | highlight: $select.search"&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/ui-select-choices&gt;
    &lt;/ui-select&gt;
  </code></pre>