ng-mouseover and leave to toggle item using mouse in angularjs

HTML Code :

<div ng-controller="Ctrl">
    <ul ng-repeat="task in tasks">
        <li ng-mouseover="enableEdit(task)" ng-mouseleave="disableEdit(task)">{{task.name}}
              <span ng-show="task.editable"><a>Edit</a></span>
        </li>
    </ul>
</div>


JS  Funtion :

(function () {
    angular.element(document).ready(function () {
        var app = angular.module('myApp', []);

        app.controller("Ctrl", function ($scope) {
            $scope.tasks = [{
                name: 'foo'
            }, {
                name: 'bar'
            }];

            $scope.enableEdit = function (item) {
                item.editable = true;
            };

            $scope.disableEdit = function (item) {
                item.editable = false;
            };
        });

        angular.bootstrap(document, ['myApp']);
    });


}());