將變量從Controller傳遞到AngularJS中的視圖

Question

我正在使用Places庫和angular google places autocomplete模塊。自動完成功能完美工作，結果正在顯示和點擊選擇。

我現在想要做的是一旦用戶選擇自動完成的結果之一，就從地址生成地圖。

我在我的控制器以下功能：

$scope.$on('g-places-autocomplete:select', function(event, place) { 
    var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({ "address": place.name }, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK && results.length > 0) { 
      location = results[0].geometry.location, 
       lat  = location.lat(), 
       lng  = location.lng(); 

      var latlng = new google.maps.LatLng(lat,lng); 
      var myOptions = { 
       zoom: 8, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     } 
    }); 
}); 

它不工作，我敢肯定，這是因爲它不能從前端訪問map_canvas提供元素（在本身在模板視圖內）。

<div id="map_canvas" style="height:300px;"></div> 

我怎麼能鏈接兩個（或通過緯度和經度變量前端）使當用戶選擇的結果，地圖出現？

EDIT

我由Plunkr示出的誤差。你會看到，一旦你選擇了一個位置，它會重定向，在我的情況下爲http：// localhost：9000 /（1.650801，％2010.267894999999953），這是經度和緯度的最後一部分。

Answer 1

好的 - 我調整了一些東西，主要是爲了我的清晰度。我認爲你在變量聲明方面有一些問題。這現在加載一個地圖對象。我讓你用使它顯示:-)

(function(){ 

    var app = angular.module('wopWop', ['google.places']); 

    app.controller('MainController', function($scope){ 
     $scope.$on('g-places-autocomplete:select', function(event, place) { 
      var loc, lat, lng, latlng, map, options, 
       geocoder = new google.maps.Geocoder(); 

      geocoder.geocode({ "address": place.name }, function(results, status) { 
       if (status == google.maps.GeocoderStatus.OK && results.length > 0) { 
        loc = results[0].geometry.location, 
        lat = loc.lat(), 
        lng = loc.lng(); 
        } 
      }); 
      latlng = new google.maps.LatLng(lat,lng); 
      options = { 
       zoom: 1, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      map = new google.maps.Map(document.getElementById("map_canvas"), options); 
     }); 
    }); 
})(); 

Plunkr