How to assign a dynamic variable from javascript to angularJS scope

I have a form where a user clicks on google map and the latitude and longitude are shown in a text box.

function addMarker(location) {
  document.getElementById('hLat').value = location.lat().toPrecision(8);
  document.getElementById('hLong').value = location.lng().toPrecision(8);  
}

The text boxes are defined as

<input type="text"  id = "hLat" name = "hLat" ng-model="form.latitude"/>
<input type="text"  id = "hLong" name = "hLong" ng-model="form.longitude"/>

In the above way, the $scope.formDetails.latitude is comes as undefined in the controller and a 404 error is received. Though the latitude and longitude values are displayed in the text box.

While if I do

 document.getElementById('hLat').value = "25.6";
 document.getElementById('hLong').value = "45.6";  

the output is 25.6 and the function executes successfully.

My controller is defined a follows:

var app = angular.module('myApp', []);
app.controller('FormCtrl', function ($scope, $http) {

    $scope.formData = {
        epic: "default"

    };

    $scope.formDetails = {

        latitude: "default",
        longitude: "default"

    };


    $scope.save = function() {
        formData = $scope.form;
    };

        $scope.submitDetails = function() {
        console.log("posting data....");
        $scope.formDetails = $scope.form;
        document.write($scope.formDetails.latitude); // strange behaviour
        $http({method:'GET', url:'http://localhost/nametestjson.php', params:{search_type:"details", latitude:$scope.formDetails.latitude, longitude:$scope.formDetails.longitude, page_no:"1", results_per_page:"15"}}).success(function(data){        
            $scope.friends = data.response.docs;        
            var str = JSON.stringify(data, undefined, 2);       
            alert("success");
        }).error(function(data, status, headers, config) {

            alert(status);
            });           
    };

});