khan khan - 3 months ago 13
AngularJS Question

On values from script function to input field ng-model gives undefined Angular

I am using google maps in my application in which i use maps related code in script tag and on after the search result it gives longitude, latitude and i am getting these values and showing these values in input

here is my part of script code which passes lon and lat to input

document.getElementById('lat').value = place.geometry.location.lat();

document.getElementById('lng').value = place.geometry.location.lng();


here is my HTML code

<div class="from-group">
<li>Latitude: <input class="from-control" ng-model="formData.lat" id="lat"></li>
<li>Longitude: <input class="from-control" ng-model="formData.lng" id="lng" ></li>
<button class="btn btn-primary" ng-click="values()" id="idbtn" >Results</button>
</div>




but it gives undefined for ng-model="formData.lng" and when i enter some thing
manually it works fine but when values comes from script it gives undefined

here is my controller code

Sscope.formData={};
$scope.values = function () {

console.log($scope.formData.lat);
console.log($scope.formData.lng);
};

Answer

When you pass the lat and long from your javascript file with

document.getElementById('lat').value = place.geometry.location.lat();
document.getElementById('lng').value = place.geometry.location.lng();

The ng-model is not getting updated or 'triggered'

try

angular.element($('#myInputElement')).triggerHandler('input')

there is a good post here that may help.

You may consider using a google maps directive such as ng-map