Angularjs delay on hover

Create custom popups with a delay on mouseover using angularjs.

HTML

<div>
    
    <div ng-controller="MainCtrl">
        <span ng-mouseenter="toggleHover(true)" ng-mouseleave="toggleHover(false)">Hover Me</span>
        <div class="outerDiv" ng-show="hovering">
            <p>Some content</p>
            <div class="innerDiv">
                <p>More Content</p>
            </div>
        </div>
    </div>
    
</div>

CSS

.container {
    width: 200px;
}
.outerDiv {
    width: 200px;
    height: 200px;
    text-align:center;
    background: yellow;
    position:relative;
}
.innerDiv {
    width: 100%;
    height: 100px;
    background: blue;
    color:white;
    text-align:center;
    position:absolute;
    bottom:0;
}

JavaScript

angular.module('myApp', [])
.controller('MainCtrl', function ($scope, $timeout) {
    // start with the div hidden
    $scope.hovering = false;
    
    $scope.toggleHover = function (bool) {
        if (bool === true) {
            $timeout(function () {
                $scope.hovering = !$scope.hovering;
            }, 500);
        } else {
            $timeout(function() {
                $scope.hovering = !$scope.hovering;
            }, 500);
        };
    }

});