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

Question

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);
};

score 1 · Accepted Answer · edited May 23 '17 at 11:51

1

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

edited May 23 '17 at 11:51

Community

1
1

answered Aug 12 '16 at 00:48

Douglas

177
11

no idea how to use this approach but i use other way $scope.$watch but its not working need bit more explaination thanx – MudassirAfzal Aug 12 '16 at 02:03

score 0 · Answer 2 · answered Aug 19 '16 at 23:25

You need to set the $scope variable with $apply.

var latElem = angular.element(document.getElementById('lat'))
var latScope = latElem.scope();
latScope.$apply("formData.lat=" + place.geometry.location.lat());

$apply evaluates an Angular Expression and initiates an AngularJS digest cycle to update the framework.

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

2 Answers2