Ng-Mouseleave-3

When we over the mouse on link,true value of isPopUp variable is assign to ng-show directive which will show the elements of popUp object and when we leave mouse from the link it will hide the elements because false value of isPopUp is assign to ng-show directive.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <a href="" ng-mouseover="isPopUp=true;" ng-mouseleave="isPopUp=false;">
            Link
        </a>
        <div ng-show="isPopUp"><span> {{ popUp.title }}</span> {{ popUp.message }}</div>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.popUp = {
            title: 'Title',
            message: 'Message'
        };
    }]);
</script>
</body>
</html>

Output