title: Filtering object in ng-repeat: keys (not value) against items in an array on scope
body: <p>I want to filter four divs based on whether or not a trait of the divs, called 'type', appears in an array on the scope. Below please find a more detailed explanation and the 3 ways I tried to accomplish this goal:</p>
  
  <p>I have four buttons that when clicked should toggle four different divs which are the byproduct of an ng-repeat</p>
  
  <p>buttons: </p>
  
  <pre><code> &lt;div class="buttonDiv"&gt;
          &lt;ul&gt;
          &lt;li ng-repeat="type in vm.reviewTypes"&gt;
            &lt;span ng-click="vm.toggleTypes.indexOf(type) == - 1 ? vm.toggleTypes.push(type) : vm.toggleTypes.splice(vm.toggleTypes.indexOf(type), 1)" ng-class="{ 'activeCategoryButton' : vm.toggleTypes.indexOf(type) != -1}"&gt;{{type}}&lt;/span&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The buttons are built off an ng-repeat through an array, vm.reviewTypes, which contains ['type1','type2','type3','type4']</p>
  
  <p>An array is built on the scope called vm.toggleTypes that contains the 'type' assigned to the current active button which is also the div(s) I want shown.</p>
  
  <p>Here is the div (well technically footer) with the ng-repeat (HTML BEFORE I TRIED TO FILTER):</p>
  
  <pre><code>    &lt;footer ng-repeat="(kind, reviews) in vm.reviews" class="site-footers-container {{kind}}"&gt;
      &lt;span&gt;{{ kind }}&lt;/span&gt;
   //MORE THINGS HERE............
    &lt;/footer&gt;
  </code></pre>
  
  <p>I want to filter based off of the 'kind' matching an element of the array vm.toggleTypes whose content is based off of which buttons are active. I have tried the following:</p>
  
  <p>(ATTEMPT 1)</p>
  
  <pre><code>      &lt;footer ng-repeat="(kind, reviews) in vm.reviews | vm.toggleTypes.indexOf(kind) != -1" class="site-footers-container {{kind}}"&gt;
      &lt;span&gt;{{ kind }}&lt;/span&gt;
   //MORE THINGS HERE............
    &lt;/footer&gt;
  </code></pre>
  
  <p>the above gvies me "Unknown provider: vmFilterProvider" as the error, <a href="https://docs.angularjs.org/error/$injector/unpr?p0=vmFilterProvider" rel="nofollow">reference</a></p>
  
  <p>next I tried:</p>
  
  <p>(ATTEMPT 2)</p>
  
  <pre><code>          &lt;footer ng-repeat="(kind, reviews) in vm.reviews | filter: vm.toggleTypes.indexOf(kind) != -1" class="site-footers-container {{kind}}"&gt;
      &lt;span&gt;{{ kind }}&lt;/span&gt;
   //MORE THINGS HERE............
    &lt;/footer&gt;
  </code></pre>
  
  <p>No errors here, however, it just doesn't work.</p>
  
  <p>I have also tried making a function on the scope that simply returns true or false depending on if the key, 'kind', from the ng-repeat matches one of the entries in the array vm.toggleTypes; however, this gave me the same error 'Unknown provider: vmFilterProvider' and the function in the controller was:</p>
  
  <p>(ATTEMPT 3) </p>
  
  <pre><code>vm.matchClass = function (key) {
  if (vm.toggleTypes.indexOf(value) != -1)
  {return true;}
  else {return false;}
  };
  </code></pre>
  
  <p>my html was then:</p>
  
  <pre><code>          &lt;footer ng-repeat="(kind, reviews) in vm.reviews | vm.matchClass(kind)" class="site-footers-container {{kind}}"&gt;
      &lt;span&gt;{{ kind }}&lt;/span&gt;
   //MORE THINGS HERE............
    &lt;/footer&gt;
  </code></pre>
  
  <p>Sorry in advance, am new to Angular and have not used filters many times</p>