highlight table row using angularjs

<div ng-app="myApp">
<div ng-controller="startCtrl">
<table>
<tr>
<th>header1</th>
<th>header2</th>
</tr>
<tbody data-ng-repeat="transaction in transactionsgroup">
  <tr ng-class="{active:$index==selectedRow}" data-ng-click="rowHighilited($index)" data-ng-repeat="txns in transaction.transactions">
<td>{{txns.id}}</td>
<td>{{txns.trasactionName}}</td>


</tr>
</tbody>
</table>

</div>
</div>

Your Controller.

var app=angular.module("myApp",[]);
app.controller("startCtrl",function($scope){
    $scope.transactionsgroup=[ 
                              {id:1,
                               transactions:            
                                            [{id:1,trasactionName:"a"},
                                            {id:2,trasactionName:"b"},
                                            {id:3,trasactionName:"c"}
                                            ]}
                             ];

    $scope.rowHighilited=function(row)
    {
      $scope.selectedRow = row;    
    }

});

Your .css

.active{
    background:yellow;
    border:1px solid;
}

Working Fiddle Link

http://jsfiddle.net/Lk4me2xp/1/

This is my custom easy solution.

i tried in the following way but it is highlighting all rows

It's because you are setting common scope property which is shared by all rows. You should set selectedRow in the scope of the individual clicked row. You can refer row child scope with this inside ngClick:

$scope.rowHighilited = function(row) {
    this.selectedRow = true; 

    // or if you also want to unselect on the second click 
    // this.selectedRow = !this.selectedRow; 
};

and then:

data-ng-class='{selected: txns.selectedRow}'