title: Change style for element from ng-repeat
body: <p>I am trying to uniqeley identify buttons in a tablerow, so I can change the style if one of them is clicked. Here is the table i am working on: </p>
  
  <p><a href="https://i.stack.imgur.com/kWFmX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kWFmX.png" alt="table "></a></p>
  
  <p>And here is the code: </p>
  
  <pre><code>&lt;table class="table"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Allergi navn&lt;/th&gt;
              &lt;th&gt;Allergi verdi&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr ng-repeat="items in $ctrl.allergen"&gt;
              &lt;td&gt;
                  &lt;b&gt;
                      {{items.Allergennavn}}
                  &lt;/b&gt;
              &lt;/td&gt;
              &lt;td id="{{$index}}"&gt;
                  &lt;button 
                      id="tableButton" 
                      type="button" 
                      class="btn-grey"  
                      ng-repeat="item in $ctrl.allergenVerdiType"
                      ng-click="$ctrl.allergiAssigned($index, items, item)"
                  &gt;
                  &lt;b&gt;
                      {{item.Allergenverdi}}
                  &lt;/b&gt;
                  &lt;/button&gt;
                  &lt;hr&gt;
              &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>And js:</p>
  
  <pre><code>ctrl.allergiAssigned = function($index, itemAllergen, itemAllergenType){
          var index = $('button').index(this);
          $(index, '#tableButton').css("background-color", "green");           
      }
  </code></pre>
  
  <p>I have tried several approaches to reference the specific button-element, using this, index, etc. I also need to verfiy that for every row, there is only one of the buttons that are selected. </p>
  
  <p>I also tried to pass <code>{{$index}}</code> to get a unique identifier for the row, but jquery doesn't support the syntax. </p>
  
  <p>UPDATE based on answers: </p>
  
  <pre><code>&lt;table class="table"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Allergi navn&lt;/th&gt;
              &lt;th&gt;Allergi verdi&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr ng-repeat="items in $ctrl.allergen"&gt;
                &lt;td&gt;
                    &lt;b&gt;
                        {{items.Allergennavn}}
                    &lt;/b&gt;
                &lt;/td&gt;
                &lt;td id="{{$index}}"&gt;
                    &lt;button id="tableButton" type="button" 
                        class="btn-grey" ng-class="{activeBtn: item.active == true}"
                        ng-repeat="item in $ctrl.allergenVerdiType"
                        ng-click="$ctrl.select(items.type, item)"&gt;
                    {{item.AllergenverditypeKode}}&lt;/button&gt;
                    &lt;hr&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
      &lt;/table&gt;
  
    ctrl.select = function(items, index) {
          angular.forEach(items, function(item){
            item.active=false;
          });
          index.active = true;
      };
  </code></pre>
  
  <p>index returns undefined</p>