title: AngularJS: How to use directives to dynamically remove class from all elements with specific ng-model?
body: <p>The solution I'm trying to attain in a nutshell, is deleting the class <code>clicked</code> from every element with a certain class name or <code>ng-class</code> name or <code>ng-model</code> name, then adding the class name on the button that was clicked.</p>
  
  <p>I have some elements that are repeated using <code>ng-repeat</code> throughout the page. They're not in the same areas on the page. Is there anyway that either <code>$scope</code> or a directive can remove a class from every element that has that <code>ng-model</code> or every child elementon that page?</p>
  
  <p>Directive:</p>
  
  <pre><code>app.directive('sibs', function () {
      return {
          link: function (scope, element, attrs) {
              element.bind('click', function () {
                  element.parent().children().removeClass('clicked');
                  element.addClass('clicked');
              })
          },
      }
  });
  </code></pre>
  
  <p>This code is only applicable to the elements next to/around the element that was clicked. I'm trying to make the removeclass() function apply to all elements with that <code>ng-model</code> name on the page.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
      &lt;div ng-repeat="a in MyArray" ng-show="isSet(a.ID)"&gt;
          &lt;input sibs type="button" id="{{a.ID}}" ng-model="myModel" value="1" ng-click="selected(1)" /&gt;
          &lt;input sibs type="button" id="{{a.ID+1}}" ng-model="myModel" value="2" ng-click="selected(2)" /&gt;
          &lt;input sibs type="button" id="{{a.ID+2}}" ng-model="myModel" value="3" ng-click="selected(3)" /&gt;
          &lt;input sibs type="button" id="{{a.ID+3}}" ng-model="myModel" value="4" ng-click="selected(4)" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;p&gt; There's more code here inbetween these parts &lt;/p&gt;
  
  &lt;div&gt;
      &lt;div ng-repeat="a in MyArray" ng-show="isSet(a.ID)"&gt;
          &lt;input sibs type="button" id="{{a.ID}}" ng-model="myModel" value="1" ng-click="selected(1)" /&gt;
          &lt;input sibs type="button" id="{{a.ID+1}}" ng-model="myModel" value="2" ng-click="selected(2)" /&gt;
          &lt;input sibs type="button" id="{{a.ID+2}}" ng-model="myModel" value="3" ng-click="selected(3)" /&gt;
          &lt;input sibs type="button" id="{{a.ID+3}}" ng-model="myModel" value="4" ng-click="selected(4)" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've switched some elements and values of course, so some values might not make sense as to why they are that value.</p>
  
  <p>Say for example the first <code>ng-repeat</code> loops twice and so does the second, if I were to click on any button element on the first loop, then clicked on another button element anywhere else, I want to be able to clear ALL buttons with <code>ng-model</code> as <code>myModel</code>. Then when all else is cleared from this class, the element that was clicked gets the class added. Is this possible?</p>
  
  <p>Or can I do this with an <code>ng-click</code> function?</p>
  
  <p>If this is possible with <code>ng-class</code>, can someone please provide a coded solution as to how this is possible?</p>