You need to check on blur that input value exist in list or not.For that do following:

Add attribute ng-blur="onBlur($event)" in input

And define following method in your controller:

$scope.onBlur = function (e) {    $timeout(function () {    var val = $(e.target).val();    if(val && $scope.states.indexOf(val) == -1) {      $(e.target).val("")    }  });};

Hello Everyone,

After some efforts i got the proper solution...

There are some directives that can be useful for the solution,

Add above condition in typeaheadFocus directive,

    if ((e.type == "focus" && viewValue != ' ') && (e.type == "focus" && viewValue != '')){        return;    }

Add following function in typeaheadFocus directive and typeaheadOnDownArrow directive,

    //compare function that treats the empty space as a match    scope.$emptyOrView = function(actual) {        if(ngModel.$viewValue.trim()) {            return actual ? actual.value.toString().toLowerCase().indexOf(ngModel.$viewValue.toLowerCase()) > -1 : false;        }        return true;    };            

Change this condition in ui-bootstrap.js,

  if (inputFormatter) {     locals.$model = modelValue;     if(modelValue){     locals.$label = view_value;  } else {     locals.$label = '';  }

Add following event in ui-bootstrap js,

element.bind('blur', function(evt) {   hasFocus = false;   if (!isEditable && modelCtrl.$error.editable) {      element.val('');      modelCtrl.$viewValue = ' ';   }   if(!isEditable && scope.no_data_found) {         //ngModel.$viewValue = '';         modelCtrl.$viewValue = ' ';         scope.no_data_found = false;         popUpEl.find('.typeaheadNoData').remove();         resetMatches();         scope.$digest();         element.val("");   }});

Add this in ui-bootstrap.js,

        // I listen for emptyTypeAhead events from the parent scope chain.    originalScope.$on(        "emptyTypeAhead",        function handlePingEvent( event, newVal1) {            var scope = originalScope.$new();            modelCtrl.$setViewValue(newVal1);            return newVal1;        }    );

Add the above function with ui-bootstrap.js in all directive,

.directive('shouldFocus', function($parse) {    return {        restrict: 'A',        link: function(scope, element, attrs) {            scope.$watch(attrs.shouldFocus, function(newVal, oldVal) {                var isActive = scope.$eval(attrs.shouldFocus);                if(isActive) {                    var ele = element[0];                    var parent = ele.parentNode                    if(ele.offsetTop + ele.offsetHeight > parent.offsetHeight + parent.scrollTop){                        parent.scrollTop = ele.offsetTop;                    } else if(parent.scrollTop > ele.offsetTop) {                        parent.scrollTop = ele.offsetTop;                    }                }            });        }    }});

Example:

<input type="text" ng-model="inquiry.account"  placeholder="Select Account"  typeahead="account.id as account.text for account in account_typeahead_json"  typeahead-input-formatter="formatModel($model,$label)"  typeahead-editable="false" typeahead-on-down-arrow typeahead-focus />

Hope this answer will be helpful for you.

Here I have added ui-bootstrap.js