Angular JS Controller setup for dynamic generated view with rendered map

I am an Angular Newbie,

I've got a data-model called playgrounds which is delivered through my controller as json. Now, on a detailed view for every id I want the playgrounds key values "lng" and "lat" to be loaded dynamically within the view for rendering a map. I am struggling with how to set the controller for getting the id specific lng and lat values in the detailed view.

Controller

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
    });
}

View

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

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

JSON (snippet)

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

Thanks in advance