title: Toggle class with ng-click on several elements
body: <p>How can I toggle classes on several elements individually with ng-click?</p>
  
  <p>In this question <a href="https://stackoverflow.com/a/22072110/2169327">https://stackoverflow.com/a/22072110/2169327</a> toggling classes with a click was done like this:</p>
  
  <p>CSS:</p>
  
  <pre><code>.red {
      color: red;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$scope.toggle = false;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button id="btn" ng-click="toggle = !toggle" ng-class="{'red' : toggle}"&gt;Change Class&lt;/button&gt;
  </code></pre>
  
  <p>But what if I have several buttons that each should toggle its own class with ng-click? </p>
  
  <p>If I set it up in this way:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button id="btn" ng-click="toggle = !toggle" ng-class="{'red' : toggle}"&gt;Change Class&lt;/button&gt;
  &lt;button id="btn2" ng-click="toggle = !toggle" ng-class="{'red' : toggle}"&gt;Change Class&lt;/button&gt;
  </code></pre>
  
  <p>Both buttons get toggled if I press one.</p>
  
  <p>I know a workaround is to define an own ng-click event for each button (f.ex toggle1 for button1, toggle2 for button2) - but is this the best way?</p>