Currently, I am utilizing the angular xeditable typehead directive to display an autocomplete dropdown. The data is being retrieved from a JSON file on the page and utilized in the jso array for e-typeahead functionality. When typing into the input field, it successfully displays matching values from the array. However, upon selecting a value from the list, the model and view are not updating accordingly. Below is an example of how my files are structured:
conroller.js
var payApp = angular.module('payRoll', ["xeditable", "ui.bootstrap"]);
payApp.controller('mainCtrl', function($scope, $http, $window,$location, $filter) {
$scope.Zip_City_options = ["1000 BOURG EN BRESSE",
"1000 BROU",
"1000 ST DENIS LES BOURG",
"1090 AMAREINS",
"1090 AMAREINS FRANCHELEINS CES",
"1090 CESSEINS",
"1090 GENOUILLEUX",
"1090 GUEREINS",
"1090 LURCY",
"1090 MONTCEAUX",
"1090 MONTMERLE SUR SAONE",
...
"1110 CHAMPDOR",
"1110 CORCELLES"];
});
The corresponding HTML code is as follows:
<div ng-controller="mainCtrl">
<span class="list-group-item">
<a href="#" ng-model="zip_code" editable-text="zip_code" e-typeahead="city for city in Zip_City_options | filter:$viewValue | limitTo:8">
{{ zip_code || '58.29C' }}
</a>
</span>
</div>