I have integrated the Google Places API to automatically populate locations/destinations into a form after a user searches. The auto-population works correctly, but I am facing an issue when trying to submit the form into my database – the object is always undefined. This problem arises specifically after the auto-population has taken place.

Interestingly, if I manually copy and paste the same information that was auto-populated into the text fields, the form submits successfully and the data gets inputted into my database without any issues.

Any thoughts on why this is happening? Shouldn't the values be bound to my ng-model when I attempt to submit the form, considering that I am auto-populating the correct values into the form?

HTML ========================

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <h3>Markers</h3>
            <form ng-submit="addMarker(newMarker)">
                <div class="form-group">
                    <p>Add a new marker: </p>
                    <div class="form-group">
                        <input type="text" class="form-control" id="title" placeholder="Title" ng-model="newMarker.title">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="address" placeholder="Address" ng-model="newMarker.address">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="category" placeholder="Category" ng-model="newMarker.category">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="url" placeholder="URL (optional)" ng-model="newMarker.url">
                    </div>
                    <div class="form-group">
                        <textarea type="textarea" class="form-control" id="description" placeholder="Message (optional)" ng-model="newMarker.description"></textarea>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="list" placeholder="Add to a list (optional)" ng-model="newMarker.list">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="latitude" placeholder="Latitude" disabled="true" ng-model="newMarker.latitude">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="longitude" placeholder="Longitude" disabled="true" ng-model="newMarker.longitude">
                    </div>
                    <input type="submit" class="btn btn-primary">
                </div>
            </form>
        </div>
        <div class="col-md-10">
            <input id="pac-input" class="controls" type="text" placeholder="Search Box">
            <div id="map"></div>
        </div>
    </div>
</div>

JS ==========================

// Get the HTML input element for search for the autocomplete search box
var input = document.getElementById('pac-input');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

// Create the autocomplete object.
var autocomplete = new google.maps.places.Autocomplete(input);

// Event Listener for a Places API search
google.maps.event.addListener(autocomplete, 'place_changed', function(){
    var infoWindow = new google.maps.InfoWindow({map: map});
    var place = autocomplete.getPlace();
    var contentString = '<p><b>'+place.name+'</b></p>'+
                        '<p>'+place.formatted_address+'</p>';
    var pos = {
            lat: place.geometry.location.lat(),
            lng: place.geometry.location.lng()
        };
    fillInForm(place);
    map.setCenter(pos);
    infoWindow.setPosition(pos);
    infoWindow.setContent(contentString);
});

// Auto fill the form from the Places API search
var fillInForm = function(place) {
  // Get the place details from the autocomplete object.
    var lat = place.geometry.location.lat();
    var lng = place.geometry.location.lng();
    var markerForm = {
            title: place.name,
            address: place.formatted_address,
            coordinates: ""+lat+", "+lng+""
    };
    for (var key in markerForm) {
        document.getElementById(key).value = '';
        document.getElementById(key).disabled = false;
        var val = markerForm[key];
        document.getElementById(key).value = val;
    }
    $scope.markerForm = markerForm;
}

// CREATE NEW MARKER ===============================
$scope.addMarker = function() {
    markersFactory.addMarker($scope.newMarker, function(returnDataFromFactory){
        if(returnDataFromFactory.hasOwnProperty('errors')){
            $scope.newMarkerErrors = returnDataFromFactory.errors;
        } else {
            // console.log(returnDataFromFactory.data);
            $scope.newMarker = {};
        }
    })
}

EDIT: Added rest of the container. Previously only provided the form div. Added the pac-input and map div.