title: Filtering Search Query with AngularJS and PHP
body: <p>I have a music store type of application and I use php to get images and names of specific musical instruments from a database. I want to incorporate a search bar that dynamically filters the musical instruments, and I want to use AngularJS to do this. I'm having trouble after creating the $watch in AngularJS. I know how to filter using a JS object, but I am having trouble with this scenario.</p>
  
  <p>I am assuming I could create a JS object from the <code>innerHTML</code> from the required elements. Then I could use an <code>ng-repeat</code> to filter through the object based on what is in the input search box. Is that a valid option? If so are there any other options available?</p>
  
  <p><strong>HTML/PHP</strong></p>
  
  <pre><code>&lt;div ng-controller="instController"&gt;
    &lt;div class="col-md-12" id="search-instrument-wrapper"&gt;
    &lt;input class="searchbar" type="text" ng-model="searchInst" placeholder="Search Instruments"/&gt;
    &lt;/div&gt;
  
  &lt;?php foreach ($instruments as $singleInstrument) : ?&gt;
    &lt;div class="col-md-4 instrument-wrapper"&gt;
     &lt;a href='instruments/&lt;?php echo $singleInstrument; ?&gt;.php#/'&gt;
      &lt;span class="inst-thumbnail"&gt;     
      &lt;img class="img-responsive instrument-images" src="images/&lt;?php echo $singleInstrument; ?&gt;"/&gt;     
      &lt;/span&gt;
     &lt;/a&gt;
     &lt;a href='instrument/&lt;?php echo $singleInstrument ?&gt;/&lt;?php echo $singleInstrument ?&gt;.php#/'&gt;
     &lt;h3 class="instrumentName"&gt;&lt;?php echo $instrumentInfo['instrumentName'];?&gt;&lt;/h3&gt;
     &lt;/a&gt;  
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;?php endforeach; ?&gt;
  &lt;?php endif; ?&gt;
  </code></pre>
  
  <p><strong>AngularJS</strong></p>
  
  <pre><code>instApp.controller('instController',['$scope', function($scope){
     $scope.searchInst = '';
     $scope.$watch('searchInst',function(newVal,oldVal){    
       /*** MY ATTEMPT ***/
          if(!$( ".instrumentName:contains('"+newVal+"')" )){
                     $(this).parent().css( "display",
          "none" );}
       /******************/
     });
  }]);
  </code></pre>