Simple table with button bar that appears when hovering a row using Angularjs and Bootstrap CSS.

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="MyApp" ng-controller="MyCtrl">
    <table class="table table-striped table-hover" >
      <thead>
        <tr>
          <th>ID</th>
          <th>NAME</th>
          <th>DESCRIPTION</th>
          <th>ACTIONS</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="p in tableData" ng-mouseover="row = $index" ng-mouseleave="row = -1">
          <td>{{p.id}}</td>
          <td>{{p.name}}</td>
          <td>{{p.description}}</td>
          <td>
            <div class="btn-group btn-group-xs" ng-show="row == $index">
              <button type="button" class="btn" ng-click="fav($index)"><span class="glyphicon glyphicon-star"></span></button>
              <button type="button" class="btn" ng-click="check($index)"><span class="glyphicon glyphicon-chevron-down"></span></button>
              <button type="button" class="btn" ng-click="del($index)"><span class="glyphicon glyphicon-remove"></span></button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="alert alert-info">{{msg}}</div>
  </body>

</html>

// Code goes here

var myApp = angular.module("MyApp", []);

myApp.controller("MyCtrl", function($scope){
  $scope.msg = "Mouse over rows and click on icons to change this message.";
  
  $scope.tableData = [
    {
      id: 1,
      name: "Product1",
      description: "Very nice product"
    },{
      id: 2,
      name: "Product2",
      description: "TOO EXPENSIVE "
    },{
      id: 3,
      name: "Product3",
      description: "Consider for Christmas"
    },{
      id: 4,
      name: "Product4",
      description: "Should go on birdsdessines.fr"
    },{
      id: 5,
      name: "Product5",
      description: "Funny but not that fun"
    },{
      id: 6,
      name: "Product6",
      description: "there is always a last one"
    }
    ];
    
  $scope.fav = function(index) {
    $scope.msg = "Favorite " + $scope.tableData[index].name;
  };
    
  $scope.check = function(index) {
    $scope.msg = "Check " + $scope.tableData[index].name;
  };
    
  $scope.del = function(index) {
    $scope.msg = "Delete " + $scope.tableData[index].name;
  };
    
    
});

/* Styles go here */

This is a simple interactive example of using Angularjs ng-repeat's $index service in a table styled using Bootstrap CSS.

The user hovers a row to display a button bar that allows him to do action for one specific row.