AngularJS mouseover binding.

HTML

<div ng-app="myApp">
<div ng-controller="MyCtrl">
  <!-- Using directive as HTML attribute -->  
    <input type="text" ng-model="obj.prop" /> {{test}}
    <div class="gray" enter content="obj.prop">Hello</div>
</div>
  
</div>

CSS

.gray {
    background: #ddd;
    width: 100px;
}

JavaScript

var app = angular.module('myApp', []);

app.directive('enter', function() {
	return {
  restrict:'A',
  scope:{ content:'='},
  link: function(scope, element, attrs) {
        element.bind('mouseover', function() {
           console.log(scope.content);
        });
    }
  }
   
});
app.controller('MyCtrl', function ($scope) {
    $scope.obj = { prop: "world" };
});