AngularJs Search with drop down filter
<p>How would you go about creating a refined search? With the code below, the filter acts on both of the columns. For example, if you type in John, you will get both John Smith &amp; Smith John. I want to use a dropdown as a filter by. I looked at other posts which mentioned filter: object.value or something.</p>

<p>I think I need to set the dropdown to a value which is then fed to the text box and filtered to the table.</p>

<p>HTML</p>

<pre><code>&lt;div ng-app="searchApp" ng-controller="searchCtrl"&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;input type="text" ng-model="searchData"&gt;

    &lt;table&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th&gt;First Name&lt;/th&gt;
                &lt;th&gt;Last Name&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;


            &lt;select&gt;
                &lt;option value=""&gt;FilterBy&lt;/option&gt;
                &lt;option value=""&gt;FirstName&lt;/option&gt;
                &lt;option value=""&gt;LastName&lt;/option&gt;
            &lt;/select&gt;



            &lt;tr ng-repeat="name in names | filter:searchData"&gt;

                &lt;td&gt;{{name.firstName}}&lt;/td&gt;
                &lt;td&gt;{{name.lastName}}&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;

&lt;script src=" search.js " type="text/javascript "&gt;&lt;/script&gt;
</code></pre>

<p></p>

<p>.JS</p>

<pre><code> var searchApp = angular.module('searchApp', []);
 searchApp.controller('searchCtrl', function($scope) {

 $scope.names = [
         {"firstName":"John","lastName":"Smith"},
        {"firstName":"Smith","lastName":"John"},
        {"firstName":"John","lastName":"Doe"},
        {"firstName":"Doe","lastName":"Jane"}
      ];



 });
</code></pre>