I have the following code:
<section class="content-header">
<h1><i class="fa" ng-class="{'fa-tasks': !isCodeError, 'fa-remove': isCodeError}"></i> {{t(title)}}</h1>
<!--<small>{{readonly == true ? t("Somente consulta"): t(actionTitle)}}</small>-->
<ol class="breadcrumb">
<li><a ui-sref="master.webadmin"><i class="fa fa-dashboard"></i> Dashboard</a></li>
<!--<li><a ui-sref="instances_edit({id: instance_id, readonly: true})">{{t("Instância")}} {{instance_name}}</a></li>-->
<li class="active">{{t(actionTitle)}} {{isCodeError ? t("Código de Erros") : t("Código de Eventos")}}</li>
</ol>
</section>
<section class="content">
<div class="box box-primary" ng-hide="data.length === 0">
<div class="box-header with-border bg bg-grayskull">
<h3 class="box-title">
<!--<button ng-disabled="loading || isPermitted('instance', 'c') == false" class="btn btn-primary" ng-click="$state.go('instances_new')"><i class="fa fa-plus"></i></button>-->
<!--{{t(actionTitle)}}-->
</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 250px;">
<input type="text" name="table_search" class="form-control pull-right" ng-model="q"
placeholder="{{t('Pesquisar')}}">
<div class="input-group-btn">
<span class="btn btn-default"><i class="fa fa-search"></i></span>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table id="tableData" class="table">
<thead>
<tr>
<th class="col-xs-4">{{t("Nome").toUpperCase()}}</th>
<!-- <th class="col-xs-1">SERVIÇO</th>
<th class="col-xs-1">PROTOCOLO</th>
<th class="col-xs-2">INTERFACE</th> -->
<th class="col-xs-7">{{t("Descrição").toUpperCase()}}</th>
<!--<th class="col-xs-1 text-center">{{t("Exibir").toUpperCase()}}</th>-->
<!--<th class="col-xs-1 text-center">-->
<!--<!–<span class="glyphicon glyphicon-edit"></span>–>-->
<!--{{t("Editar").toUpperCase()}}-->
<!--</th>-->
<!--<th class="col-xs-1" style="text-align: center;">{{t("Remover").toUpperCase()}}</th>-->
<!-- <th class="col-xs-1"></th> -->
<!--<th width="10"></th>-->
<th class="col-xs-1">{{t("Ações").toUpperCase()}}</th>
</tr>
</thead>
<tbody>
<!-- <tr ng-repeat="row in data" ng-click="" ng-class=""> -->
<tr dir-paginate="row in data | filter:{DESCRIPTION:q} | orderBy: 'ID' | itemsPerPage: linesPerPage">
<!-- <td class="text-center"><input type="checkbox" ng-model="user.admin"></td> -->
<td>{{row.CODE | limitTo: 20}}</td>
<!-- <td>{{getServiceType(row.config_txt.SERVICE.ServiceType)}}</td>
<td>TCP</td>
<td>{{row.config_txt.SERVICE.TCPLocalAddress}}</td> -->
<td>{{row.DESCRIPTION | limitTo: 100}}</td>
<!--<td class="text-center" ng-show="isCodeError"><a ng-class="{'text-gray': isPermitted('error_event', 'r') == false }"-->
<!--ui-sref="coderrors_edit({id:row.ID, readonly:true})"-->
<!--a-disabled="isPermitted('error_event', 'r') == false"><i class="fa fa-eye"></i></a></td>-->
<!--<td class="text-center" ng-show="!isCodeError"><a ng-class="{'text-gray': isPermitted('error_event', 'r') == false }"-->
<!--ui-sref="codevents_edit({id: row.ID, readonly:true})"-->
<!--a-disabled="isPermitted('error_event', 'r') == false"><i class="fa fa-eye"></i></a></td>-->
<!--<!–<td class="text-center"><a a-disabled="isPermitted('errors_event', 'u') == false" ui-sref="cod_errors_edit({id : row.ID, readonly:false})"><span class="glyphicon glyphicon-edit"></span></a></td>–>-->
<!--<td class="text-center" ng-show="isCodeError"><a ng-class="{'text-gray': isPermitted('error_event', 'u') == false }"-->
<!--ui-sref="coderrors_edit({id:row.ID, readonly:false})"-->
<!--a-disabled="isPermitted('error_event', 'u') == false"><i class="fa fa-edit"></i></a></td>-->
<!--<td class="text-center" ng-show="!isCodeError"><a ng-class="{'text-gray': isPermitted('error_event', 'u') == false }"-->
<!--ui-sref="codevents_edit({id:row.ID, readonly:false})"-->
<!--a-disabled="isPermitted('error_event', 'u') == false"><i class="fa fa-edit"></i></a></td>-->
<!--<td class="text-center"><a ng-class="{'text-gray': isPermitted('error_events', 'd') == false || row.NAME === 'Admin' }"-->
<!--a-disabled="isPermitted('error_events', 'd') == false || row.NAME === 'Admin'"-->
<!--ng-click="$emit('remove', { id: row.ID, index: $index, data: data })"-->
<!--style="cursor: pointer;" title="{{t('Remover registro')}} '{{row.CODE}}'?"><i-->
<!--class="fa fa-remove" style="color: #888;font-size: 15px;"></i></a></td>-->
<td ng-show="isCodeError" class="col-xs-3 text-left dropdown">
<div class="btn-group">
<a href="#" class="btn bg-gray dropdown-toggle" id="dropdownMenuTools1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">...
<!--<span class="caret"></span>-->
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuTools1">
<li>
<a ng-class="{'text-gray': isPermitted('error_event', 'c') == false }"
a-disabled="isPermitted('error_event', 'c') == false"
ui-sref="master.coderrors_edit({ id: row.ID, isCopy: true})"><i class="fa fa-files-o"></i> {{t("Copiar")}}</a>
</li>
<li>
<a ng-class="{'text-gray': isPermitted('error_event', 'u') == false }"
ui-sref="master.coderrors_edit({id:row.ID, readonly:false})"
a-disabled="isPermitted('error_event', 'u') == false"><i class="fa fa-edit"></i> {{t("Editar")}}</a>
</li>
<li>
<a ng-class="{'text-gray': isPermitted('error_event', 'r') == false }"
ui-sref="master.coderrors_edit({id:row.ID, readonly:true})"
a-disabled="isPermitted('error_event', 'r') == false"><i class="fa fa-eye"></i> {{t("Exibir")}}</a>
</li>
<li role="separator" class="divider"></li>
<li>
<a ng-class="{'text-gray': isPermitted('error_event', 'd') == false || row.NAME === 'Admin' }"
a-disabled="isPermitted('error_event', 'd') == false || row.NAME === 'Admin'"
ng-click="$emit('remove', { id: row.ID, index: $index, data: data })"
style="cursor: pointer;" title="{{t('Remover registro')}} '{{row.CODE}}'?"><i
class="fa fa-remove text-danger"></i> {{t("Remover")}}</a>
</li>
</ul>
</div>
</td>
<td ng-show="!isCodeError" class="col-xs-3 text-left dropdown">
<div class="btn-group">
<a href="#" class="btn bg-gray dropdown-toggle" id="dropdownMenuTools2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">...
<!--<span class="caret"></span>-->
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuTools2">
<li>
<a ng-class="{'text-gray': isPermitted('error_event', 'c') == false }"
a-disabled="isPermitted('error_event', 'c') == false"
ui-sref="master.codevents_edit({ id: row.ID, isCopy: true})"><i class="fa fa-files-o"></i> {{t("Copiar")}}</a>
</li>
<li>
<a ng-class="{'text-gray': isPermitted('error_event', 'u') == false }"
ui-sref="master.codevents_edit({id:row.ID, readonly:false})"
a-disabled="isPermitted('error_event', 'u') == false"><i class="fa fa-edit"></i> {{t("Editar")}}</a>
</li>
<li>
<a ng-class="{'text-gray': isPermitted('error_event', 'r') == false }"
ui-sref="master.codevents_edit({id: row.ID, readonly:true})"
a-disabled="isPermitted('error_event', 'r') == false"><i class="fa fa-eye"></i> {{t("Exibir")}}</a>
</li>
<li role="separator" class="divider"></li>
<li>
<a ng-class="{'text-gray': isPermitted('error_event', 'd') == false || row.NAME === 'Admin' }"
a-disabled="isPermitted('error_event', 'd') == false || row.NAME === 'Admin'"
ng-click="$emit('remove', { id: row.ID, index: $index, data: data })"
style="cursor: pointer;" title="{{t('Remover registro')}} '{{row.CODE}}'?"><i
class="fa fa-remove text-danger"></i> {{t("Remover")}}</a>
</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table> <!-- grid -->
</div>
<div class="box-footer bg bg-grayskull">
<div class="form-group">
<dir-pagination-controls boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="js/app_core/views/dirPagination.tpl.html"></dir-pagination-controls>
</div>
</div>
</div>
<msg type="info" message="{{t('Não há registros a serem exibidos')}}." condition="data.length == 0"></msg>
You need to apply the hover event to trigger the mouseenter and mouseleave events. How do I do this?