title: Custom Filter for AngularJS based on a boolean
body: <p>I am trying to write a custom filter.  It's purpose is to do one of three things, based on a drop down menu.  It needs to either show only hidden items, only notHidden items, or all items.</p>
  
  <p>Here is my drop down menu.</p>
  
  <pre><code>&lt;select class="span1" ng-model="itemfilter.hidden'"&gt;
    &lt;option value=""&gt;All&lt;/option&gt;
    &lt;option value="hidden"&gt;Hidden&lt;/option&gt;
    &lt;option value="shown"&gt;Shown&lt;/option&gt;
  &lt;/select&gt; 
  </code></pre>
  
  <p>Here is the HTML for the ng-repeat and filter</p>
  
  <pre><code>&lt;div ng-repeat="item in items | hiddenFilter:itemfilter.hidden:'hidden"&gt; &lt;/div&gt;
  </code></pre>
  
  <p>Here is the Custom Filter</p>
  
  <pre><code>app.filter('hiddenFilter', function($_ ) {
    return function( items, show_or_hide, attribute ) {
      var shownItems = [];
      $_.each(items, function(item) {
        if(show_or_hide === 'shown') {
          if (item[attribute] === true)
            shownItems.push(item);          
          } else{
            if (item[attribute] !== true)
              shownItems.push(item);          
        }
      });
    return shownItems;
   };
  });
  </code></pre>
  
  <p>I am having trouble figuring out how to make the drop down menu change what this filter displays, any help would be greatly appreciated.</p>
  
  <p>Edits -- 
  Once I passed in the attribute correctly I started getting different results.  The all and hidden options now show only nonHidden items, and the shown options shows only hidden items.  Still not sure where I am going wrong.</p>
  
  <p>Edit 2 --
  Tried to make a jsfiddle for it here <a href="http://jsfiddle.net/mindstormy/RVB8A/1/" rel="nofollow">http://jsfiddle.net/mindstormy/RVB8A/1/</a></p>