title: Make a single button active in a group of buttons created by a ng-repeat
body: <p>I am working on a directive that displays a table using ng-repeat directives. Each cell in the table may contain a button depending on the data. Here is the pertinent snippet of the template.</p>
  
  <pre><code>&lt;tbody&gt;
      &lt;tr ng-repeat="row in data.rows"&gt;
          &lt;td&gt;{{ row.rowName }}&lt;/td&gt;
          &lt;td ng-repeat="cell in row.cells"&gt;
              &lt;button id="button-{{ row.id }}-{{ cell.id }}"
                      class="btn btn-primary"
                      ng-show="cell.isActive"
                      ng-click="onClick(row.id, cell.id, $event)"&gt;Select&lt;/button&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>In the controller I have</p>
  
  <pre><code>$scope.onClick = function (rowId, cellId, event) {
      $scope.selectedRowId = rowId;
      $scope.selectedCellId = cellId;
      $scope.selectedButtonId = event.target.id;
  };
  </code></pre>
  
  <p>The goal is to make it such that when a user clicks a button in the table, that button becomes active. When the user clicks on another button, it will become active making the previously active button inactive. This functionality will be used to drive what is displayed on another section of the page.</p>
  
  <p>I have tried a few things, but I think the most angular way of doing things is to use <code>ng-class</code> in the buttons to apply the active and inactive classes based on what button has been clicked. To this end, I am assigning them all unique ids and tracking which button has been clicked based on the event. </p>
  
  <p>The problem is I can not figure out how to make the <code>ng-class</code> work. Is there some way I can get the id of the current button that I am in, or am I going about this completely wrong in the first place.</p>
  
  <p>Thanks.</p>