Clickable bootstrap row with angular

angularjs, twitter-bootstrap

Solution

Suggestion and the fiddle:

<tr ng-repeat="ingredient in ingredients" ng-click="setSelected();">
    <td>{{ ingredient.name }}</td>
    <td>{{ ingredient.status }}</td>
</tr>

<script>
var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {

    $scope.ingredients = [
        {'name': 'potato'},
        {'name': 'tomato'}
    ];

    $scope.setSelected = function() {
        $scope.selected = this.ingredient;
        console.log($scope.selected);
    };

}
</script>

Problem

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? The following code does not work for me (the ng-click part): Table: ``` <table class="table table-hover"> <thead> <tr> <th>Name</th> <th>Status</th> </tr> </thead> <tbody> <tr ng-repeat="ingredient in ingredients" ng-click="setSelected({{$index}});"> <td>{{ ingredient.name }}</td> <td>{{ ingredient.status }}</td> </tr> </tbody> </table> ``` Controller: ``` $scope.setSelected = function(index) { $scope.selected = $scope.ingredients[index]; console.log($scope.selected); }; ```

Original source