javascript - How do I pass form input data from a datalist to my angular controller? -

i working on small pet project finds exchange rates , having trouble passing input angular controller. have datalist input shows selection of countries type:

<label for="ajax">from</label> <input type="text" id="ajax" list="json-datalist"> <datalist id="json-datalist"></datalist> 

and items populated using javascript:

// <datalist> , <input> elements. var datalist = document.getelementbyid('json-datalist'); var input = document.getelementbyid('ajax');  var fromcode = 'usd'; // create new xmlhttprequest. var request = new xmlhttprequest();  // handle state changes request. request.onreadystatechange = function(response) { if (request.readystate === 4) {     if (request.status === 200) {         // parse json         var jsonoptions = json.parse(request.responsetext);          // loop on json array.         jsonoptions.foreach(function(item) {             // create new <option> element.             var option = document.createelement('option');              // set value using item in json array.             option.value = item.name;             fromcode = item.code;             // add <option> element <datalist>.             console.log(option);              datalist.appendchild(option);         });          // update placeholder text.         input.placeholder = "e.g. united states dollar - usd";     } else {         // error occured :(         input.placeholder = "couldn't load currency options :(";     } } };  // update placeholder text. input.placeholder = "loading currencies...";  // set , make request. request.open('get', 'js/currencies.json', true); request.send(); 

the currencies.json file looks this.

i showing user country name , trying pass country code angular controller can find right exchange rate country , display it.

now angular controller looks this:

var myapp = angular.module("myapp", []); myapp.controller("mycontroller", ['$scope', '$http', function ($scope, $http) {  $scope.from = fromcode; $http.get("https://api.fixer.io/latest?symbols=" + $scope.from)     .then(function (response) {         $scope.newrate = response.data;     });  $http.get("https://api.fixer.io/latest?base=usd")     .then(function (response) {         $scope.currencies = response.data;     });  }]); 

the 'fromcode' set usd default , supposed updated datalist item changes does. want angular perform new lookup every-time change datalist selection in input form. how accomplish this?

you shouldn't passing view controller. of data should sourced controller. of javascript have on html page should in controller.

once you've done that, can bind view controller using ng-repeat , ng-model , data updated in controller automatically.