title: Clickable bootstrap row with angular
body: <p>I have got a table, styled with bootstrap. The content of this table is filled using Angular.js. How do I make a row clickable so it will call a function in the scope?</p>
  
  <p>The following code does not work for me (the ng-click part):</p>
  
  <p>Table:</p>
  
  <pre><code>    &lt;table class="table table-hover"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Status&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr ng-repeat="ingredient in ingredients" ng-click="setSelected({{$index}});"&gt;
                  &lt;td&gt;{{ ingredient.name }}&lt;/td&gt;
                  &lt;td&gt;{{ ingredient.status }}&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>$scope.setSelected = function(index) {
      $scope.selected = $scope.ingredients[index];
      console.log($scope.selected);
  };
  </code></pre>