I'm not really satisfied with what I can find. I just want a simple example of a menu system in Angularjs with hover effect and selection effect.

I understand that 'hover' effects can be done in CSS, but this is more of an exercise for me to understand angularjs better.

What I am trying to do is pretty basic stuff. 

Basically I have some HTML which has some DIVs (or menu items) :

```
<div NavCtrl id="header">
    <div class="item" ng-click="click(1)" ng-mouseenter="hoverIn()" ng-mouseleave="hoverOut()">
1
    </div>
    <div class="item" ng-click="click(2)" ng-mouseenter="hoverIn()" ng-mouseleave="hoverOut()">
2
    </div>
    <div class="item" ng-click="click(3)" ng-mouseenter="hoverIn()" ng-mouseleave="hoverOut()">
3
    </div>
</div>

```

I want to do two things.

* listen on **click**
* listen on **mouseIn** and **mouseOut**

I understand..

1. It is probably nicer to do the hover effect in CSS
2. It is possible to do some inline logic in the HTML with angularjs

...because I want to have flow on effects from these events. A hover event needs to pull information out related to that menu item, and a click event should also be able to perform some action related to that menu item. Cheap CSS tricks are not going to solve this!

For my hover logic, I thought this would do the trick :

```
  $scope.hoverIn = function($event){
    angular.element($event.srcElement).addClass('hover')
  };

  $scope.hoverOut = function($event){
    angular.element($event.srcElement).removeClass('hover')
  };

```

However $event is undefined :( . How do I get to the element object from a mouseover event?

My click logic looks like this :

```
  $scope.click = function(position, $event) {

    elem = angular.element($event.srcElement);

    if (elem.hasClass("clicked")) {
      elem.removeClass("clicked")
    }else {
      elem.addClass("clicked")
    }

    // if (position == 1) //do something etc...
  };

```

Same problem : $event is undefined. I also want to pass in the index, so that I can do something special for certain menu items.

My Fiddle is here :

<https://jsfiddle.net/zxjg3tpo/5/>