How to highlight the table row on mouse hover
<p>I have this table:</p>

<pre><code>&lt;div class="container" ng-app="sortApp" ng-controller="mainController"&gt;

  &lt;table class="table table-bordered "&gt;  
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;a href="#" ng-click="sortType = 'name'; sortReverse = !sortReverse"&gt;
            Sushi Roll 
          &lt;/a&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;a href="#" ng-click="sortType = 'fish'; sortReverse = !sortReverse"&gt;
          Fish Type 
          &lt;/a&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;

    &lt;tbody&gt;
      &lt;tr ng-repeat="roll in sushi | orderBy:sortType:sortReverse | filter:searchFish"&gt;
        &lt;td&gt;{{ roll.name }}&lt;/td&gt;
        &lt;td&gt;{{ roll.fish }}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;

  &lt;/table&gt;

&lt;/div&gt;
</code></pre>

<p>Here is controller:</p>

<pre><code>angular.module('sortApp', [])

.controller('mainController', function($scope) {
  $scope.sortType     = 'name'; // set the default sort type
  $scope.sortReverse  = false;  // set the default sort order
  $scope.searchFish   = '';     // set the default search/filter term

  // create the list of sushi rolls 
  $scope.sushi = [
    { name: 'Cali Roll', fish: 'Crab' },
    { name: 'Philly', fish: 'Tuna' },
    { name: 'Tiger', fish: 'Eel' },
    { name: 'Rainbow', fish: 'Variety' }
  ];

});
</code></pre>

<p>Here is <a href="http://jsfiddle.net/d8atdw0t/304/" rel="nofollow">fiddler</a>.</p>

<p>I want to highlight the border of table row on mouse hover using <code>ng-mouseover</code> directive.</p>

<p>How can I implement it?</p>