title: How to add class to parent's parent's div in Angular JS?
body: <p>I have a dinamically builded list of tests: </p>
  
  <pre><code>&lt;script id="TestsTemplate" type="text/ng-template"&gt;
          &lt;article class="tests-main"&gt;
              &lt;section class="tests"&gt;
                  &lt;div class="test" ng-repeat="test in tests"&gt;
                      &lt;p&gt;Question {{ test.number }}:&lt;/p&gt;
                      &lt;div ng-repeat="answer in test.answers"&gt;
                          &lt;div ng-repeat="(key, value) in answer"&gt;
                              &lt;p&gt;&lt;button ng-click="processAnswer(value, $event)" class="btn" &gt;&amp;#9675 {{ key }}&lt;/button&gt;&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
          &lt;/article&gt;
      &lt;/script&gt;
  </code></pre>
  
  <p>and I want to add a class to the div(class="test") in which button was pressed.</p>
  
  <p>I am familiar only with the jQuery and I can think of only this approach:</p>
  
  <pre><code>$scope.processAnswer = function(isRight, event) {       
      isRight ? $scope.count++ : $scope.count--;
      event.target.parentNode.parentNode.parentNode.addClass('hide');
  }
  </code></pre>
  
  <p>How to do it in Angular style ?</p>
  
  <p><strong>EDIT:</strong>
  My solution:</p>
  
  <p>Use <a href="https://docs.angularjs.org/api/ng/directive/ngClass" rel="nofollow">ng-class</a> and <a href="https://docs.angularjs.org/api/ng/directive/ngRepeat" rel="nofollow">$index</a>:</p>
  
  <pre><code>&lt;div ng-class="($index==selectedIndex) ? 'hide' : 'test'" ng-repeat="test in tests"&gt;
  </code></pre>
  
  <p>controller:</p>
  
  <pre><code>$scope.selectedIndex = -1;
  $scope.processAnswer = function(isRight, index) {
          isRight ? $scope.count++ : $scope.count--;
          $scope.selectedIndex = index - 1; //$index starts at 0;
      }
  </code></pre>
  
  <p>where <code>index</code> is <code>test.number</code></p>