title: Filter function by category and company using AngularJS
body: <p>I have this code here that allows me to filter my products by category ($scope.myFilter). This works fine, but I want to as well add the functionality to filter products by company, but it seems that I can't do it without a bit of help.</p>
  
  <pre><code>app.controller('AdminController_Music', function ($scope, $filter) {
  
  var myStore = new store();
  $scope.currentPage = 0;
  $scope.pageSize = 12;
  $scope.numberOfPages = Math.ceil(myStore.products_sound.length / $scope.pageSize);
  
  $scope.filteredItems = [];
  $scope.groupedItems = [];
  $scope.pagedItems = [];
  
  var searchMatch = function (haystack, needle) {
      if (!needle) {
          return true;
      }
      return haystack.toLowerCase().indexOf(needle.toLowerCase()) !== -1;
  };
  $scope.search = function (name) {
      $scope.filteredItems = $filter('filter')(myStore.products_sound, function (product) {
          for (var attr in product) {
              if (searchMatch(product[name], $scope.query))
                  return true;
          }
          return false;
      });
      $scope.currentPage = 0;
      $scope.groupToPages();
  };
  $scope.myFilter = function (column, category) {
      $scope.filteredItems = $filter('filter')(myStore.products_sound, function (product) {
          for (var attr in product) {
              if (searchMatch(product[column], category))
                  return true;
          }
          return false;
      });
      $scope.currentPage = 0;
      $scope.groupToPages();
  };
  $scope.groupToPages = function () {
      $scope.pagedItems = [];
  
      for (var i = 0; i &lt; $scope.filteredItems.length; i++) {
          if (i % $scope.pageSize === 0) {
              $scope.pagedItems[Math.floor(i / $scope.pageSize)] = [$scope.filteredItems[i]];
          } else {
              $scope.pagedItems[Math.floor(i / $scope.pageSize)].push($scope.filteredItems[i]);
          }
      }
  };
  // functions have been describe process the data for display
  $scope.myFilter();
  $scope.search();
  
  });
  </code></pre>
  
  <p>I tried playing with the myFilter function but with not good results.</p>
  
  <pre><code>    this.products_sound = [
        { num: 1, code: '001s', category: 'toy', company:'lego', name: 'lego1', src: "product/1.jpg", description: 'Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. ', price: 69.99, class: 'show-down' },
  </code></pre>
  
  <p>This is the HTML. The second li works and the first not...</p>
  
  <pre><code>&lt;ul class="filter group albumFilter"&gt;
                      &lt;p&gt;Brands:&lt;/p&gt;
                      &lt;li ng-click="myFilter('company','lego'" &gt;Lego&lt;/li&gt;
                      &lt;li ng-click="myFilter('category','construction')" &gt;Construct&lt;/li&gt;
                  &lt;/ul&gt;
  </code></pre>
  
  <p>Here is the production version of the code. It is in <a href="https://en.wiktionary.org/wiki/Cyrillic" rel="nofollow">Cyrillic</a>, so don't bother with the text. Just navigate down to the product loop; the sorting buttons are on top of that:</p>
  
  <p><a href="http://konstantindichev.com/flexfit/" rel="nofollow">http://konstantindichev.com/flexfit/</a></p>