How to change the class on one div while hovering over another div with AngularJS?

How to change the class on one div while hovering over another div with
AngularJS?

I want to change the class of one div while hovering over another div
using AngularJS directives. Here is what I have so far
http://jsfiddle.net/E8nM5/38/
HMTL
<div ng-controller="Ctrl" ng-app>
<div ng-class="my-class">This div will change class when one hovers
over bottom DIV </div>
<br/>
<div class="hover-div" ng-mouseenter="my-class = 'highlight'"
ng-mouseleave="my-class = 'lowlight'">HOVER OVER ME TO CHANGE THE UPPER
DIV's CLASS</div>
</div>
CSS
div.highlight {
padding: 10px;
background: red;
color: white;
}
div.lowlight {
padding: 10px;
background: blue;
color: white;
}
div.hover-div {
padding: 10px;
background: green;
color: white;
}
JS
function Ctrl($scope){
}
Any ideas?