Problems between ngBlur in a input and the list items from a search in that input box

Question

I have a search box with an input tag, and after that an ordered list with options for your input text searching.

The input has associated the ngBlur directive for cleaning the searching box and close the list of suggested items.

My problem is when i want to click on an item, it should redirect to a description page, but the ngBlur detect first the event outside the input and close everything.

<input class="search-box" ng-blur="closeSearch()">
<ul ng-repeat="product in products">
<li>{{product.name}}</li>
</ul>

The estructure is something like that. Somebody has a solution for this?

Answer 1

I don't know if is the best way but I manage to take care of the ng-blur using timeout and a boolean:

 $scope.stopPropagation = false;

  $scope.click = function() {
    alert("click");
    $scope.stopPropagation = true;
  }

  $scope.change = function() {
    $timeout(function() {
      if (!$scope.stopPropagation)
        $scope.filter = "asdasd";

      $scope.stopPropagation = false;
    }, 125);
  }

Here I put the string "asdasd" in the function change (fired by ng-blur) to not obtain results. I apply the change 125ms after to let the click function to be fired before the data from the list is removed.

Link: http://codepen.io/armellajuan/pen/qbNdVp