angularjs - レンダリングされたマップを使用して動的に生成されたビューの Angular JS コントローラーのセットアップ

Question

私はAngularの初心者です。

コントローラーを介してjsonとして配信される、プレイグラウンドと呼ばれるデータモデルがあります。ここで、すべての ID の詳細ビューで、マップをレンダリングするためにプレイグラウンドのキー値「lng」と「lat」をビュー内に動的にロードする必要があります。詳細ビューで ID 固有の lng 値と lat 値を取得するためのコントローラーの設定方法に苦労しています。

コントローラ

function PlaygroundDetailCtrl($scope, $routeParams, $http) {
    $http.get('playgrounds/playgrounds.json').success(function(data){
        angular.forEach(data, function(item) {
          if (item.id == $routeParams.playgroundId) 
            $scope.playground = item;
        });
    });

    angular.extend($scope, {
    center: { lat, lng },
    marker: { lat: 40.0948, lng: -3.8232 },
    zoom: 12
    });
}

意見

    <h2>{{playground.id}}</h2>

<leaflet marker="marker" center="center" zoom="zoom"></leaflet>

JSON (スニペット)

[
    {
    "id": 1,
    "lng": 12.3677,
    "lat": 51.4524 
    }
] 

前もって感謝します