AngularJS form input with Google Places API not saving full string - angularjs

Question

I am trying to capture data from a form input that utilizes the Google Places API.
If I begin typing a location like for instance "Kingst", and I then choose "Kingston ON, Canada" from the drop-down list of related suggestions, the input field populates with "Kingston ON, Canada" as it should.
However, when I hit the save button, only what I originally typed is saved to the database. ie: "Kingst".
Here is a possible hint:
During multiple tests, I have found out that if I put my cursor back into that same input field and then remove it again, the proper full string is saved to the database when I hit the submit button.
I'm not sure how to get the full string to save upon selecting a suggestion from the dropdown, without having to put my cursor into the field and change the string.
In my form I have this input field:
<form>
<div class="form-group">
<input id="eventLocation" placeholder="Event Location..." class="form-control" name="eventLocation" ng-model="newEvent.location">
</div>
<div class="form-group">
<input type="hidden" id="eventLat" placeholder="Latitude..." class="form-control" name="eventLat" ng-model="newEvent.lat">
</div>
<div class="form-group">
<input type="hidden" id="eventLng" placeholder="Longitude..." class="form-control" name="eventLng" ng-model="newEvent.lng">
<button type="submit" ng-disabled="fuck.$invalid" class="btn btn-primary pull-right" ng-click="addEvent(newEvent);newEvent = null;">send</button>
</form>
In the HTML below the form I have the following:
<script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
var placeSearch, autocomplete;
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** #type {!HTMLInputElement} */(document.getElementById('eventLocation')),
{types: ['geocode']});
autocomplete.addListener('place_changed', fillInLatLng);
}
function fillInLatLng() {
var place = autocomplete.getPlace();
var lat = place.geometry.location.lat(),
lng = place.geometry.location.lng();
var eventLat = document.getElementById('eventLat');
var eventLon = document.getElementById('eventLng');
eventLat.value = lat;
eventLon.value = lng;
console.log(lat);
console.log(lng);
}
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
</script>
In the controller I have:
$scope.addEvent = function(newEvent) {
var eventLat = document.getElementById('eventLat').value;
var eventLng = document.getElementById('eventLng').value;
if (newEvent) {
// push a event to the end of the array
$scope.events.$add({
location: newEvent.location,
latitude: eventLat,
longitude: eventLng,
createdBy: user.uid,
createdAt: Firebase.ServerValue.TIMESTAMP
})
// display any errors
.catch(alert);
}
document.getElementById('eventLat').value = '';
document.getElementById('eventLng').value = '';
};

Answer 1

I solved this issue by doing the following:
In my controller I added:
var eventLoc = document.getElementById('eventLocation').value;
...
$scope.events.$add({
location: eventLoc,
...

Answer 2

Better you used this code. Because while using this code circular to json conversion is build inside the js
Controller.js file
.directive('googleplace', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, model) {
var options = {
types: [],
componentRestrictions: {country: 'in'}
};
scope.gPlace = new google.maps.places.Autocomplete(element[0], options);
google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
scope.$apply(function() {
model.$setViewValue(element.val());
});
});
}
};
});
Note:If u can read on specfic country means , include this tag
componentRestrictions: {country: 'in'}
In HTML file you just add googleplace tag only.