ng-mouseover directive angularjs in menu

I need to view a checkbox when the mouse is over an <li> tag. So initially, the menu li has simply a label (all inside an ng-repeat). When i pass over one of them it change in checkbox. Of course when the mouse leave it it comes back to label. I tried but it's not working and it views always both (checkbox and label) This is the code with a jsfiddle :

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">
        <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>

Everything is used with AngularJs and ng-mouseover / ng-mouseleave directives


I've created an isolated scope variable showCheckbox on every list item and using it to show/hide checkbox on mouseover/mouseleave respectively. I'm using ng-show instead of ng-if.

<div ng-controller="MyCtrl">
        <li ng-repeat="title in all_titles" ng-init="showCheckbox=false" ng-mouseover="showCheckbox = true" ng-mouseleave="showCheckbox = false">
            <input type="checkbox" ng-show="showCheckbox" ng-model="data.cb1" aria-label="Checkbox 1" /> <a data-ng-if="checkBoxSelection == false">{{title}}</a>    

Now the checkbox will be visible only on mouseover. See Fiddle

Need Your Help

Azure media services and Flash video player

flash azure media

Where I can see sample of playing video uploaded to Windows Azure by Flash player with playback?

Using Font Awesome icons as bullets

css fonts font-awesome

An example use case of font awesome is like this (as taken from their examples):