title: How to change the class on one div while hovering over another div with AngularJS?
body: <p>I want to change the class of one div while hovering over another div using AngularJS directives. Here is what I have so far <a href="http://jsfiddle.net/E8nM5/38/">http://jsfiddle.net/E8nM5/38/</a></p>
  
  <p>HMTL</p>
  
  <pre><code>&lt;div ng-controller="Ctrl" ng-app&gt;
     &lt;div ng-class="my-class"&gt;This div will change class when one hovers over bottom DIV &lt;/div&gt;
     &lt;br/&gt;
     &lt;div class="hover-div" ng-mouseenter="my-class = 'highlight'" ng-mouseleave="my-class = 'lowlight'"&gt;HOVER OVER ME TO CHANGE THE UPPER DIV's CLASS&lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>function Ctrl($scope){
  }
  </code></pre>
  
  <p>Any ideas?</p>