title: Most Angular way to add class on click
body: <p>I'm building an interface with a lot of toggles to control what data is being filtered in a different part of an App's search results. Here is a codepen of it: <a href="http://codepen.io/notarypublic/pen/BEIfk" rel="nofollow">Here</a></p>
  
  <p>Coming from a jQuery/Backbone background, what is the most Angular way of toggling the 'active' state of any/all of the filter items? Essentially, almost any <code>&lt;li&gt;</code> tag presented here is a toggle-able feature.</p>
  
  <p>In jQuery, I would put a listener on the view and wait for any click events to bubble up and toggle an 'active' class on the <code>event.target</code>. I want to do it the best way with Angular.</p>
  
  <p>(Also, this is my first Angular project.. I am probably doing all sorts of things the wrong way. Apologies in advance.)</p>
  
  <p>Edit: To clarify the question, I have an App Interface with 20+ possible filter attributes to control a separate module on the page. Every time someone toggles one of these filter attributes, I want to add/remove an 'active' class. Do I put an <code>'ng-click="function(...)"'</code> in the <code>ng-repeat</code> for each controller? Or is there an easier way to manage this module-wide behavior (a la event bubbling, like in Backbone/jQuery) ?</p>
  
  <p>Thanks!</p>