title: Angular ng-class via ng-click inside ng-repeat
body: <p><strong>Edit:</strong> The answers below haven't taken into account the +1 function that is also being applied. Still looking for how I can make both happen.</p>
  
  <p>I have an ng-click function that is called on a button within an ng-repeat, but each time one of the buttons is clicked it causes the class to change on all the buttons.</p>
  
  <p>How can I fix my code to make it so only the clicked button itself changes?</p>
  
  <p>(Keep in mind, the numbers work fine, it's just the classes that change all together.)</p>
  
  <p>The Angular controller code:</p>
  
  <pre><code>$scope.activeClass = false;
  
  $scope.addHeart = function(post){
  
      $scope.activeClass = !$scope.activeClass;
  
      $scope.activeClass ? post.hearts += 1 : post.hearts -= 1;
  
  };
  </code></pre>
  
  <p>And the HTML:</p>
  
  <pre><code>&lt;button ng-class="{'red' : activeClass}" ng-click="addHeart(post)"&gt;{{post.hearts | number}}&lt;/button&gt;
  </code></pre>