Using ng-blur and ui-sref not working properly

Question

I have a search box with a custom drop-down list of results pane that appears when you type a word into it or when focusing. So my html looks something like this:

<div class="input-group">
    <input type="text" class="form-control" ng-model="userSearch" ng-change="onInputChange()" ng-focus="onInputChange()" ng-blur="onInputBlur()" />
    <span class="input-group-btn">
        <button type="button" ng-click="search()">Search</button>
    </span>
</div>

<div id="results" ng-if="panelShown">
    <div ng-repeat="contact in contacts | filter: { name: userSearch }">
        <a ui-sref="profile({ id: contact.id })">{{ contact.name }}</a>
    </div>
</div>

javascript looks something like this:

app.controller("SearchController", ["$scope", function($scope) {
    $scope.contacts = [...];
    $scope.panelShown = false;

    $scope.onInputChange = function() {
        $scope.panelShown = true;
    };

    $scope.onInputBlur = function() {
        $scope.panelShown = false;
    };

    $scope.search = function() {
        // bla bla bla...
    };
}]);

So, as you can see, the structure of my array data is $scope.contactsas follows:

[
   {
       id: "1",
       name: "George"
   },
   {
       id: "2",
       name: "Adam"
   },
   {
       id: "3",
       name: "Ron"
   }
   ...
]

I want when the input is blurred to hide the panel with the results ( #resultsdiv), and when it is again in focus - to display it. It really works perfect.

, , - , ui-sref ( - profile). , , .

- ? !

Answer 1

, blur click, ui-sref, , , (, , ) .

, , ng-mousedown. mousedown blur, :

app.controller("SearchController", function($scope, $state) {
  $scope.goToState = function (state, params) {
    $state.go(state, params);
  }
}

<a ng-mousedown="goToState('profile', {id: contact.id})">{{ contact.name }}</a>