AngularJS Ngblur get incomplete input value - angularjs

Question

Just wondering why the ngblur directive did not get the complete value of a text input. I am using easyautocomplete plugin to do search through a JSON file.
When it found it will list out several suggestions that could be match to the input. The problem is when we do not type the full text and choose to select from the provided list, ngblur will only capture what we have typed to the input box instead of what we choose from the list.
Here is the fiddle https://jsfiddle.net/zvezrg6j/
json country is Indonesia or Singapore or Thailand
UPDATE
What i wanted to do is when i choose from the list or when i leave the text input with full text, the app will look up for some details, eg. after typing the country the app will look for its capital.

Answer 1

This is the solution you are looking for.
Updated JSFiddle
Instead of calling FindMaterialDetail method on blur, call it onHideListEvent of auto-complete options.
angular.module('myapp', [])
.controller('MyCtrl', function($scope) {
$scope.data = {};
$scope.FindMaterialDetail = function(country) {
var scope = angular.element($("#outer")).scope();
scope.$apply(function(){
scope.data.result = country;
})
}
var options = {
url: "https://api.myjson.com/bins/1rjn5",
getValue: "country",
listLocation: "data",
list: {
match: {
enabled: true
},
onHideListEvent: function() {
$scope.FindMaterialDetail($("#Autocomplete").val());
}
}
};
$("#Autocomplete").easyAutocomplete(options);
});

Answer 2

The option you can try is using $scope.$watch for the model. Instead of calling the function in ngblur try adding the following snippet in your script.
$scope.$watch("data.country", function(event) {
$scope.data.result = $scope.data.country;
});
Please find the modified fiddle.

Answer 3

This issue is occurring because blur event is firing before value update in 'data.country', You can resolve this issue by using below code. Create A directive like below-
angular.module('app', []).directive('easyAutoComplete', function() {
return {
restrict: 'A',
require: 'ngModel',
priority: 1, // needed for angular 1.2.x
link: function(scope, elm, attr, ngModelCtrl) {
var options = {
url: "https://api.myjson.com/bins/1rjn5",
getValue: "country",
listLocation: "data",
list: {
match: {
enabled: true
},
onChooseEvent: function() {
scope.$apply(function() {
ngModelCtrl.$setViewValue($(elm).getSelectedItemData().country);
});
}
},
};
$(elm).easyAutocomplete(options);
}
};
});
then use it like as -
<input type="text" ng-model="data.country" easy-auto-complete ng-change="FindMaterialDetail(data.country)" id="Autocomplete">

Answer 4

There is a problem on loading jquery autocomplete Plugin in your angular code , as the angular code got initialized first followed by the autocomplete .
So i've converted the above code to Angular Bootstrap Typehead which is exactly does the autocomplete written in angular way .It's also recommended to use angular directives rather than jquery plugins for building angular applications
Check for Custom templates for results on this link.
Angular Autocomplete TypeAhead
Here is the Fiddle
<input type="text" ng-model="data.country" placeholder="Custom template" uib-typeahead="country as country for country in Countries" typeahead-show-hint="true" typeahead-min-length="0" ng-blur="FindMaterialDetail(data.country)" class="form-control">