title: AngularJS filter based on array of strings?
body: <p>I'm having a hard time wrapping my head around how to go about doing an Angular filter to solve a problem that I'm running into.</p>
  
  <p>Here's a basic example of my data structure, an array of tasks:</p>
  
  <pre><code>var tasks = [
      { Title: "This is a task title",
        Tags: ["Test","Tag","One","Two","Three"] },
      { Title: "Another test tag title",
        Tags: ["Some", "More", "Tags"] },
      { Title: "One more, why not",
        Tags: ["I","Like","Dirt"] },
      { Title: "Last one!",
        Tags: ["You","Like","Dirt"] }
  ];
  </code></pre>
  
  <p>So each object has an array of tags. For the sake of example let's say I am outputting each of those objects as a row in a table.</p>
  
  <p>Once the pages ng-controller is initialized, I'm <strong>grabbing all of the tags from all of the tasks</strong> (without duplicates) and assembling them into a <code>tags</code> array.</p>
  
  <p>Then, I'm outputting those tags as toggle-able buttons on the page. All the buttons are blue by default, meaning "active" (in other words: show tasks with this tag contained therein). I need to be able to click on one of those buttons to "toggle off" that tag -- which will filter out any tasks rows in the table wherein the task has that tag.</p>
  
  <p>Like so for visual reference -- grey = "hide tasks whose tags contains this tag", blue = "show tasks whose tags contain this tag":</p>
  
  <p><img src="https://i.stack.imgur.com/zSRTa.png" alt="So you&#39;d see a big row of buttons like this">.</p>
  
  <p>Clicking on a button turns it grey, filtering out any tasks in the table that have that tag. I can then click the buttons again to toggle that tag back on, re-showing all tasks with that tag.</p>
  
  <p>Am I explaining this clearly enough? It's a confusing system.</p>
  
  <p>Anyway, I've tried the following:</p>
  
  <p><code>ng-filter="task in filteredWithTags = (tasks | filter: { tags: arrayOfTags }"</code> to no avail.</p>
  
  <p>Someone mind pointing me in the right direction? :)</p>
  
  <p><strong>PS:</strong> I had this working earlier this week by calling a <code>filterByTag(tag)</code> function in my controller. This would loop through every task in the array of tasks and if it had the tag that matched, it would hide that task. Similarly <strong>re-activating</strong> a tag would do the same thing, loop through everyone and work the magic... but I'm told that my method was slow + overkill, because "angular filters can handle all of that for you, and it will be more best-practicy". Hence, why I'm here, trying to figure out how to let Angular do the work for me :)</p>
  
  <p>Any help is appreciated!</p>