ngTable tooltip (title attribute) does not show data values

Question

In this plunk I have an ngTable with two columns. When I hover over the data, the tooltip shows the column name instead of the value. This is because the title attribute of td is set with the column name. How to fix it to show the actual value?

HTML

<table ng-table="tableParams" class="table table-bordered table-hover">
    <tbody>
        <tr ng-repeat="u in data">
                <td title="u.uid">{{ u.uid }}</td>
                <td title="u.ugr">{{ u.ugr }}</td>
        </tr>
    </tbody>
</table>

Javascript

var app = angular.module('app', ['ngTable']);
app.controller('myCtl', function($scope,NgTableParams) {

      $scope.data = [ 
        { uid: 'User 1',ugr: 'Group 1'},
        { uid: 'User 2', ugr: 'Group 2'}
      ];

      $scope.tableParams = new NgTableParams({dataset: $scope.data});

});

Answer 1

You can use on your td this:

<td ng-attr-title="{{u.uid}}">{{ u.uid }}</td>
<td ng-attr-title="{{u.ugr}}">{{ u.ugr }}</td>