указатель мыши в меню

Мне нужно просмотреть флажок, когда мышь находится над <li>. Поэтому изначально в меню li есть только метка (все внутри ng-repeat). Когда я перехожу через один из них, он меняет флажок. Конечно, когда мышь опустится, он возвращается к этикетке. Я пробовал, но он не работает, и он всегда просматривает оба (флажок и метка). Это код с jsfiddle:

http://jsfiddle.net/HB7LU/20368/

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

function MyCtrl($scope) {
    $scope.all_titles = [
        "Title 1",
        "Title 2",
        "Title 3",
        "Title 4"
        ];

    $scope.checkBoxSelection = false;

    $scope.OnMouseOverCheckbox = function(value) {
        $scope.checkBoxSelection = value;
    }
}

<div ng-controller="MyCtrl">
    <ul>
        <li id="$index" ng-repeat="title in all_titles" ng-mouseover="OnMouseOverCheckbox(true)" ng-mouseleave="OnMouseOverCheckbox(false)">
            <input type="checkbox" data-ng-if="checkBoxSelection == true" ng-model="data.cb1" aria-label="Checkbox 1"/>
            <a data-ng-if="checkBoxSelection == false">{{title}}</a>
        </li>
    </ul>
</div>

Все используется с директивами AngularJs и ng-mouseover/ng-mouseleave