title: AngularJS filter using ng-repeat checkboxes show all on page load
body: <p>This one is similar to a post that someone posted before but different variations. I am having trouble filtering check boxes where I want all the products to load on page load and when I check multiple check boxes within technologyArray and/or technologyArray2, it shows all the products that match the check box name. Right now, my check boxes are just doing an AND condition so when I check multiple check boxes, I get no results.  Here's my code inJSFiddle . <a href="http://jsfiddle.net/missggnyc/9aL1hm4x/6/" rel="nofollow">http://jsfiddle.net/missggnyc/9aL1hm4x/6/</a></p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;div ng-controller="MyCtrl"&gt;
     &lt;h1&gt;Language 1&lt;/h1&gt;
      &lt;div class="no-decoration" ng-repeat="tech in technologyArray"&gt;
          &lt;label&gt;&lt;input type="checkbox" ng-model="tech.on" ng-change="checkChange()" /&gt;{{tech.name}}
          &lt;/label&gt;
      &lt;/div&gt;&lt;br&gt;
       &lt;h1&gt;Language 2&lt;/h1&gt;
      &lt;div class="no-decoration" ng-repeat="tech2 in technologyArray2"&gt;
          &lt;label&gt;&lt;input type="checkbox" ng-model="tech2.on" ng-change="checkChange2()" /&gt;{{tech2.name}}
          &lt;/label&gt;
      &lt;/div&gt;
      &lt;hr&gt;
      Results:
      &lt;div ng-repeat="portfolioItem in portfolioArray | filter:myFunc | filter:myFunc2" class="ng-scope"&gt;
          &lt;h3&gt; {{portfolioItem.name}}&lt;/h3&gt;
      &lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var myApp = angular.module('myApp', []);
  function MyCtrl($scope) {
  
      $scope.showAll = true;
      $scope.checkChange = function() {
          for(t in $scope.technologyArray){
              if($scope.technologyArray[t].on){
                  $scope.showAll = false;
                  return;
              }
          }
          $scope.showAll = true;
      };
  
     $scope.myFunc = function(a) {
         if($scope.showAll) { return true; }
  
         var sel = false;
  
          for(tech in $scope.technologyArray){
              var t = $scope.technologyArray[tech];
              console.log(t);
              if(t.on){
                  if(a.technology.indexOf(t.name) == -1){
                      return false;
                  }else{
                      sel = true;
                  }
              }           
          }
         return sel;
      };
  
      $scope.showAll2 = true;
      $scope.checkChange2 = function() {
          for(t2 in $scope.technologyArray2){
              if($scope.technologyArray2[t2].on){
                  $scope.showAll2 = false;
                  return;
              }
          }
          $scope.showAll2 = true;
      };
  
     $scope.myFunc2 = function(b) {
         if($scope.showAll2) { return true; }
  
         var sel2 = false;
  
          for(tech2 in $scope.technologyArray2){
              var t2 = $scope.technologyArray2[tech2];
              console.log(t2);
              if(t2.on){
                  if(b.technology2.indexOf(t2.name) == -1){
                      return false;
                  }else{
                      sel2 = true;
                  }
              }           
          }
         return sel2;
      };
  
  
      $scope.technologyArray = [{ name: "HTML", on: false}, {name:"CSS", on: false}, {name:"Django", on: false}, {name:"Python", on: false}, {name:"AngularJS", on: false}, {name:"Javascript", on: false}, {name:"3rd party Payment API", on: false}, {name:"3rd party Libraries", on: false}] 
  
      $scope.technologyArray2 = [{name:"Jquery", on: false}, {name:"RestfulAPI", on: false}, {name:"AAAAAHH", on: false}, {name:"NodeJS", on: false}, {name:"Mongo", on: false}, {name:"Express", on: false}, {name:"Jade", on: false}, {name:"Wordpress", on: false}, {name:"MySQL", on: false}, {name:"Joomla", on: false}, {name:"Magento", on: false}, {name:"Jira", on:false}];
  
      $scope.portfolioArray = [{
          "id": "1",
          "name": "Storm Pig",
          "technology": ["HTML", "CSS", "Django", "Python", "AngularJS", "Javascript", "3rd party Payment API", "3rd party Libraries"]
      }, {
          "id": "2",
          "name": "Placer",
          "technology": ["HTML", "CSS", "Django", "Python", "AngularJS", "Javascript", "Jquery"]
      }, {
          "id": "3",
          "name": "Custom Proposal App",
          "technology": ["RestfulAPI", "AAAAAHH", "AngularJS", "HTML", "CSS", "Javascript", "NodeJS", "Mongo", "Express", "Jade"]
      }, {
          "id": "4",
          "name": "21 Zero",
          "technology": ["HTML", "CSS", "Wordpress", "MySQL"]
      }, {
          "id": "5",
          "name": "Detour Journal",
          "technology": ["HTML", "CSS", "Joomla", "MySQL"]
      }, {
          "id": "6",
          "name": "Dex Custom Websites",
          "technology": ["HTML", "CSS", "Wordpress", "MySQL", "Magento", "Jira"]
      }, {
          "id": "7",
          "name": "Conversion Jump",
          "technology": ["HTML", "CSS", "Joomla", "MySQL"]
      }, {
          "id": "8",
          "name": "The Canyons Pass",
          "technology": ["HTML", "CSS", "Joomla", "MySQL"]
      }]
  
  
  }
  </code></pre>