**** ** Htmlcode
<div ng-controller="ngAutoCompleteController">
<div angucomplete-alt id="txtAutocomplete" placeholder="Type country name" pause="100"selected-object="afterSelectedCountry" local-data="Countries" search-fields="CountryName" title-field="CountryName" minlength="1" input-class="form-control" match-class="highlight">
</div>
<div ng-show="SelectedCountry">
Selected Country : {{SelectedCountry.CountryName}}
</div>
</div>
@section scripts{
<script src="~/Scripts/Angularcntrl/Cntrls.js"></script>
<script src="~/Scripts/Angularcntrl/Services.js"></script>
<link href="~/Content/angucomplete-alt.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script>
}
<style type="text/css">
.angucomplete-dropdown {
overflow-y: auto;
max-height: 200px;
}
</style>
Myapp.Js
var app = angular.module('MyApp', ['angularUtils.directives.dirPagination'])
app.controller('MyHomeCntrl', function ($scope) {
$scope.msg = "Hello Angular...";
})
Controller.Js
app.controller('ngAutoCompleteController', ['$scope', '$http', function ($scope, $http, Myservices) {
$scope.Countries = [];
$scope.SelectedCountry = null;
$scope.afterSelectedCountry = function (selected) {
alert('Enter in Control autocom')
var dbjkb = Myservices.Autocomservice()
if (selected) {
$scope.SelectedCountry = selected.originalObject;
}
}
}]);
Service.Js
app.service('Myservices', function ($scope,$http) {
this.Autocomservice = function () {
var Sert = $http({method: 'GET',url: '/Home/GetCountries',}).then(function (data) {$scope.Countries = data.data; }})return Sert;}})