title: angular js adding a class to an image in a gallery on click
body: <p>I have an image gallery in angular js which multiple images. When a user clicks an image I want to add a style (in this case a border). If the clicks one of the selected images again, i want to remove the border. I have it working to add/remove imageURLs to an array of "selected_images" on click but I can't get the styles to add/remove.</p>
  
  <p>Here is my markup:</p>
  
  <pre><code>    &lt;div class="col-md-3 col-sm-4 col-xs-6" ng-repeat="imageURL in property.imageURLs"&gt;
          &lt;img src={{imageURL}} ng-click="select_image(imageURL)" class="img-responsive" ng-class="{ 'selected-image': image_is_selected(image) }" style="max-height: 120px;" alt="" title=""&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the js:</p>
  
  <pre><code>$scope.image_is_selected = function(image) {
          if($scope.selected_images.indexOf(image) == -1) {
              return false;
          } else {
              return true;
          }
      }
  
      $scope.select_image = function(image) {
          console.log('image: ' + image);
          var image_index = $scope.selected_images.indexOf(image)
          console.log('image index: ' + image_index);
          if(image_index != -1) {
              $scope.selected_images.splice(image_index, 1);
          } else {
              $scope.selected_images.push(image);
          }
      }
  </code></pre>
  
  <p>This obviously isn't working as image_is_selected gets called a bunch of times... What is the best practice here?</p>