autocomplete load data on focus

Question

hi all

 

i have ac# MVC project with angular ls and entity framework

 

in my view i put an angucomplete with its controller

 

and it works properly

 

i want to load dropdown data when i focus in the textbox search of the autocomplete

my angular controller is

 

app.controller("HomeController", ['$scope', '$http', function ($scope, $http) {

$scope.countries = [];

$scope.SelectedCountries = null;

$scope.AfterSelectedCoutries = function (selected) {

if (selected) {

$scope.SelectedCountries = selected.originalObject;

}

}

$http.get("/Home/Get_Doctor").then(function (d) {

$scope.countries = d.data;

$timeout(function () {

var searchInput = document.getElementById('txtautocomplete');

searchInput.focus();

}, 0);

}, function (error) {

alert('Failed');

})

}])

 

and my HTML code is

 

<div class="form-group">

<label for="title" class="col-sm-2 control-label">Doctor</label>

<div class="col-sm-10">

<div ng-controller="HomeController">

<div angucomplete-alt id="txtautocomplete"

placeholder="Type Doctor name" pause="100"

selected-object="AfterSelectedCoutries"

local-data="countries" search-fields="Doctor_Name_Arabic"

title-field="Doctor_Name_Arabic" minlength="1"

input-class="form-control" match-class="highlight">

</div>