AngularJS Simple Example

HTML

<div ng-app ng-controller="ddController" >
  
  <div style="height:100px" id="SearchDropdown" ng-mouseenter="Dropdown.showIt()" ng-mouseleave="Dropdown.hideItNotimer()">
    Hover Me I have no timer (open={{Dropdown.open}})
    <ul ng-show="Dropdown.open">
      <li ng-click="Dropdown.searchValue = key.CompoundName" ng-repeat="key in data | filter:Dropdown.searchValue">

        {{key}}

      </li>
    </ul>
  </div>
  
  <div style="height:100px" id="SearchDropdown" ng-mouseenter="Dropdown.showIt()" ng-mouseleave="Dropdown.hideIt()">
    Hover Me I try to use a timer(open={{Dropdown.open}})
    <ul ng-show="Dropdown.open">
      <li ng-click="Dropdown.searchValue = key.CompoundName" ng-repeat="key in data | filter:Dropdown.searchValue">

        {{key}}

      </li>
    </ul>
  </div>

</div>

JavaScript

function ddController($scope, $filter, $timeout) {
  $scope.data = ["1", "2", "3"];

  $scope.Dropdown = {
    open: false,
    searchValue: "",

    timer: null,

    hideIt: function() {

      this.timer = $timeout(function() {
      alert("timeout happened the value will not change");
        this.open = false;
      }, 50);
    },
    hideItNotimer: function() {

      this.open = false;

    },
    showIt: function() {
      $timeout.cancel(this.timer);
      this.open = true;
    }
  };
}