title: Change CSS class's property on click
body: <p>I've read around a little bit and have a good start to what I ultimately want.  <a href="https://stackoverflow.com/questions/28138008/angularjs-how-to-change-the-color-property-via-toggle-when-css-class-does-chang">This</a> was helpful, along with another article which I forgot the link to.  However, everything I've read <strong>ADDS</strong> a CSS class or property to an element.  I want to <strong>CHANGE</strong> a property of an existing CSS class, but I don't know how to target it.</p>
  
  <p>I think I want to use <a href="https://docs.angularjs.org/api/ng/directive/ngClass" rel="nofollow noreferrer"><code>ng-class</code></a> in one of these use cases taken from the Angular documentation:</p>
  
  <ol>
  <li>If the expression evaluates to a string, the string should be one or more space-delimited class names.</li>
  <li>If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name.</li>
  </ol>
  
  <p>My existing code uses <code>ng-class</code> along with some controller logic.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div ng-controller="ngToggle"&gt;
      &lt;div ng-class="{'inset-gray-border' : style}"&gt;
          &lt;div class="subcontainer" ng-click="toggleStyle()"&gt;{{item.name}}&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This currently adds the <code>inset-gray-border</code> class to the nested <code>div</code>, but I just want to change the border property in the <code>subcontainer</code> class.</p>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>angular.module('app').controller('ngToggle', ['$scope', function($scope) {
      $scope.style = false;
      $scope.toggleStyle = function() {
          $scope.style = $scope.style === false ? true: false;
      };
  }]);
  </code></pre>
  
  <p>I considered using a directive, but I believe that would be overkill.  I think this can be achieved in a controller.  </p>
  
  <p>EDIT: After further research I think <a href="https://docs.angularjs.org/api/ng/function/angular.element" rel="nofollow noreferrer">jQLite</a> can do the trick, but that would probably require a directive.</p>