angular-leaflet-directive example fiddle

http://angularjs.org/

by maistho

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="https://tombatossals.github.io/angular-leaflet-directive/dist/angular-leaflet-directive.min.js"></script>
<body ng-controller="DemoController">
    <leaflet center="london" markers="markers" height="480px" width="100%"></leaflet>
</body>

JavaScript

var app = angular.module("demoapp", ["leaflet-directive"]);
app.controller('DemoController', ['$scope', function ($scope) {
    angular.extend($scope, {
        london: {
            lat: 51.505,
            lng: -0.09,
            zoom: 5
        },
        markers: [{
            lat: 51.505,
            lng: -0.09,
            message: 'Hi!'
        }]
    });
}]);