Angular: Animation

http://angularjs.org/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<div ng-controller="MyCtrl" class="wrap" ng-mouseover="animateToggle = !animateToggle" ng-mouseleave="animateToggle = !animateToggle">
  <div class="box" ></div>
  <div animate-me="animateToggle" ng-mouseover="isOn()" ng-hide="true" class="settings">div to animate</div>
</div>

CSS

.wrap {
  position: relative;
}
.box { 
  width: 300px; 
  height: 300px;
  background-color: grey; 
 }
.settings {
  position: absolute;
  bottom: 20px;
}

JavaScript

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

myApp.directive('animateMe', function() {
   return function(scope, element, attrs) {
      scope.$watch(attrs.animateMe, function() {
         element.slideToggle("fast");
      })
   }
});

function MyCtrl($scope) {
    $scope.animateToggle = false;
    $scope.isOn = function () {
	    $scope.animateToggle = true;  
    }
}