<div ng-app="example">
    <div example-hover>
    Hover me
    </div>
</div>

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

angular.module("example")
             .controller("exampleHoverController", function( $scope ) {
            $scope.showHoverList = false;

            $scope.setHoverList = function(value) {
                console.log("Set hoverlist value: "+value);
                this.showHoverList=value;
                $scope.$apply();
            }
     });

angular.module("example")
             .directive("exampleHover", function( $compile ) {
       return {
           restrict: "A",
           template: '',
           controller: 'exampleHoverController',
           link: function( scope, element) {
                  element.after('<example-dropdown></example-dropdown>');
                $compile(element.parent().find('example-dropdown'))(scope);

                element.bind("mouseover", function() {
                    scope.showHoverList = true;
                  scope.setHoverList(true);
                });
                element.bind("mouseout", function() {
                    scope.showHoverList = false;
                  scope.setHoverList(false);
                });
           }
       }
     });

 angular.module("example")
                .directive("exampleDropdown", function() {
        return {
            restrict: 'E',
          replace: true,
          template: '<div ng-show="showHoverList">I should be visible when hovered!</template>',
          controller: "exampleHoverController"
        };
     });