title: Change background of table row and column on hover
body: <p>Noobie at using <code>angularJS</code>. I have a <code>bootstrap</code> table populated using <code>ng-repeat</code>. It is a matrix layout, with row and column headers, how should I highlight the complete <code>td row and column</code> with cursor on respective table cell. </p>
  
  <p>So far I have a class in <code>main.css</code> <code>.tdHover{ background-color: red; }</code> which I want to apply on hover. </p>
  
  <p>Here is my <code>html</code> in <code>jade</code>:</p>
  
  <pre><code> td(ng-repeat='game in games', ng-mouseover="mouseOverTd(game)", ng-class="{??}", style='text-align:center;vertical-align:middle;')
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>angular.module('theApp')
    .controller('MainCtrl', function ($scope, $http, socket) {
      $scope.games= [];
      $scope.idHoveredTD = null;
  
      $scope.mouseOverTd = function(game){
        window.alert(theme);
        //how should I apply/return class to apply?
      };
      //mouseout remove class?  
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/9Vbgi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Vbgi.png" alt="enter image description here"></a></p>