AngularJS add class to table header on cell hover. Add this directive to td being rendered in order to get class set on the corresponding td in thead section of the table.

app.js

.directive('addClassToHeaderOnHover', function(){
        return function(scope, element, attrs){
            var classname = element.attr('add-class-to-header-on-hover');
            element.mouseenter(function(){
                var idx = element.index() + 1;
                var $htd = element.parents('table').find('thead td:nth-child(' + idx + ')');
                $htd.addClass(classname);
            });

            element.mouseleave(function(){
                var $htd = element.parents('table').find('thead td');
                $htd.removeClass(classname);
            });
        }
    })

Nice.
May want to use th rather than td inside the thead.