title: Changing css on click for one of many duplicate divs?
body: <p>So i have a div. </p>
  
  <pre><code>&lt;div class="class" ng-click="example()"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I am using angular 1.6.4 and jQuery. This div has a background color and a border color. I want to change those when i click this div. I know I can do something like this:</p>
  
  <pre><code>$scope.example = function(){
      $(".class").addClass("class_change");
  };
  </code></pre>
  
  <p>OR</p>
  
  <pre><code>$scope.example = function(){
      $(".class").css("background-color", "white");
      $(".class").css("border-color", "red");
  };
  </code></pre>
  
  <p>My question arises when I have copies of that div on the same page, and I only want it to change the div I click, not all of them. </p>
  
  <pre><code>&lt;div class="class" ng-click="example()"&gt;&lt;/div&gt;
  &lt;div class="class" ng-click="example()"&gt;&lt;/div&gt;
  &lt;div class="class" ng-click="example()"&gt;&lt;/div&gt;
  &lt;div class="class" ng-click="example()"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I had assumed I could use $(this), but for some reason it is not working. Thanks.</p>