anglejs- jqueryを使用してテキストボックスにデータセットを送信できません

Question

GoogleマップのPlaces APIを使用するフォームがあります。 私のフォームには以下のフィールドがあります：
1）名前を入力するテキストボックス。
2）Googleアドレスを取得するためのテキストボックス。
3）Googleアドレスからの緯度を保存するテキストボックス。
4）Googleアドレスからの経度を保存するテキストボックス。

そして、私はバックエンドサービスにすべてのこれらの値を渡すためにしようとしているが、場所APIによって設定された値は、サービスにパラメータとして渡され取得されていません。

は、ここに私のHTMLです：

<div ng-app="myApp" ng-controller="myMap"> 
    <form name="addForm" ng-submit="vm.addForm()" novalidate> 
    <div class="form-group"> 
     <input type="text" name="name" id="name" ng-model="vm.name" placeholder="Name" /> 
     <h2>Address</h2> 
     <input type="text" id="source_point" name="source_point" ng-model="vm.source_point" placeholder="Enter address here"> 
     <input type="text" id="src_lat" name="src_lat" ng-model="vm.src_lat" placeholder="latitude"> 
     <input type="text" id="src_long" name="src_long" ng-model="vm.src_long" placeholder="longitude"> 
    </div> 
    <button type="submit">Add Data</button> 
    </form> 
</div> 
<div id="source_map"></div> 

と私のコントローラは、次のようになります。

angular.module('myApp', []) 
    .factory('myService', function($http) {}) 
    .controller('myMap', function(myService, $http, $scope) { 

    var vm = this; 
    var map; 
    var marker; 
    var latLngC; 

    var places1 = new google.maps.places.Autocomplete(document.getElementById('source_point')); 
    google.maps.event.addListener(places1, 'place_changed', function() { 
     var place1 = places1.getPlace(); 

     var src_addr = place1.formatted_address; 
     var src_lat = place1.geometry.location.lat(); 
     var src_long = place1.geometry.location.lng(); 

     var mesg1 = "Address: " + src_addr; 
     mesg1 += "\nLatitude: " + src_lat; 
     mesg1 += "\nLongitude: " + src_long; 

     document.getElementById('src_lat').value = src_lat; 
     document.getElementById('src_long').value = src_long; 
    }); 

    $scope.post = {}; 
    $scope.post.addForm = []; 
    $scope.vm = {}; 
    $scope.index = ''; 
    var baseUrl = 'api/'; 
    // function to submit the form after all validation has occurred 
    vm.addForm = function() { 
     var dataPost = { 
     eventName: $scope.vm.name, 
     eventLocation: $scope.vm.source_point, 
     eventLocLat: $scope.vm.src_lat, 
     eventLocLong: $scope.vm.src_long 
     }; 
     return $http({ 
     method: 'post', 
     url: baseUrl + 'addFormData', 
     data: dataPost, 
     headers: { 
      'Content-Type': 'application/x-www-form-urlencoded' 
     } 
     }); 
    } 
    }); 

はこちらFIDDLE

です

考えられる理由は何でしょうか？経度と緯度の入力に

Answer 1

セッターは間違っている：

$scope.$apply(function() { 
    $scope.vm.src_lat = src_lat; 
    $scope.vm.src_long = src_long; 
    }); 

代わり範囲と角度意志に

document.getElementById('src_lat').value = src_lat; 
    document.getElementById('src_long').value = src_long; 

プット値になり、残り:)