angular-leaflet-directive example fiddle

http://angularjs.org/

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css">
<script src="http://code.angularjs.org/1.2.2/angular.js"></script>
<script src="http://tombatossals.github.io/angular-leaflet-directive/dist/angular-leaflet-directive.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<body ng-controller="DemoController">
    <leaflet center="center" markers="markers" layers="layers" width='480' height='200'></leaflet>
</body>

JavaScript

var app = angular.module('demoapp', ['leaflet-directive']);

app.controller('DemoController', ['$scope', 'leafletData', '$http', '$q', function ($scope, leafletData, $http, $q) {

    var complieMessage = function () {

        var deferred = $q.defer();

        var startTime = '2015-07-20T00:17:00Z';
        var eta = '2015-07-27T00:17:00Z';

        $http.get('https://api.sealevelresearch.com/1/predictions/tide-windows/liverpool-gladstone-dock/', {
            method: 'GET',
            responseType: 'json',
            params: {
                format: 'json',
                start: startTime,
                end: eta,
                tide_level: 7.5
            }
        })
        .success(function (data) {

            // for testing only
            console.log(data);
            deferred.resolve(data);
        })
        .error(function (error) {

            // for testing only
            console.log(error);
            deferred.reject(error);
        });

        return deferred.promise;
    };

    angular.extend($scope, {
        center: {
            lat: 53.4511485,
            lng: -3.0180967,
            zoom: 13
        },
        layers: {
            baselayers: {
                osm: {
                    name: 'OpenStreetMap',
                    url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    type: 'xyz'
                }
            },
            overlays: {
                markersOverlay: {
                    name: 'Markers',
                    type: 'group',
                    visible: true
                }
            }
        },
        markers: {
            "testMarker": {
                layer: 'markersOverlay',
                lat: 53.4511485,
                lng: -3.0180967,
                focus: false,
                getMessageScope: function () {
                    var scope = $scope.$new(true);

                    var promise = complieMessage();
                    promise.then(function...