title: What element raised ng-click in custom directive ng-repeater
body: <p>I have a repeater inside of a directive that spits out table rows.</p>
  
  <p>When a user clicks on a row I want to highlight that row.</p>
  
  <p>I have something that works, I was just wondering if there was a better way of doing it:</p>
  
  <pre><code>.directive('userList', function(){
      return{
          restrict: 'A',
          template: '&lt;table&gt;'+
                      '&lt;tr&gt;'+
                          '&lt;th&gt;User Name&lt;/th&gt;'+
                          '&lt;th&gt;First Name&lt;/th&gt;'+
                          '&lt;th&gt;Last Name&lt;/th&gt;'+
                          '&lt;th&gt;Email Address&lt;/th&gt;'+
                      '&lt;/tr&gt;'+
                      '&lt;tr ng-repeat="user in users" ng-click="selectUser(user,$event)" ng-mouseenter="overUser($event)" ng-mouseleave="leaveUser($event)"&gt;'+
                          '&lt;td ng-click="selectUser(user)"&gt;{{user.UserName}}&lt;/td&gt;'+
                          '&lt;td&gt;{{user.FirstName}}&lt;/td&gt;'+
                          '&lt;td&gt;{{user.LastName}}&lt;/td&gt;'+
                          '&lt;td&gt;{{user.Email}}&lt;/td&gt;'+
                      '&lt;/tr&gt;'+
                  '&lt;/table&gt;',
          scope:{
                  selectedUser: '=',
                  users: '='
          },
          link: function (scope, elem, attrs){
              scope.selectUser = function(user,event){
                  $("div[user-list] tr.ts-li-selected").removeClass("ts-li-selected");
                  $(event.target).closest("tr").addClass("ts-li-selected");
                  scope.selectedUser=user;
              };
              scope.overUser = function(event){
                  $("div[user-list] tr.ts-li-over").removeClass("ts-li-over");
                  $(event.target).closest("tr").addClass("ts-li-over");
              };
              scope.leaveUser = function(event){
                  $("div[user-list] tr.ts-li-over").removeClass("ts-li-over");
              };
          }
      }
  });
  </code></pre>
  
  <p>I've notice <code>this</code> doesn't seem to reference the element that raised the event like it would if I'd done it in straight-up java or jQuery.  Rather than that, I've sent the event to my function, event.target always sends the child so I go to the table row to set the class on the row.  </p>
  
  <p>I was wondering if there was a...cleaner way of doing this, if there actually was a "this" reference that angular would use in these situations that I could call rather than walking the DOM Tree.</p>