ngLeaflet sample

controller.js

(function (window, angular, undefined) {
  'use strict';

  angular.module('shell')
    .controller('MapController', ['$scope',
      function ($scope) {

        $scope.layers = {
          baselayers: {
            yandex: {
              name: 'Yandex',
              type: 'yandex',
              layerOptions: {
                layerType: 'map'
              }
            },
            google: {
              name: 'Google',
              layerType: 'ROADMAP',
              type: 'google'
            },
            osm: {
              name: 'OpenStreetMap',
              type: 'xyz',
              url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
              layerOptions: {
                subdomains: ['a', 'b', 'c'],
                attribution: '© OpenStreetMap contributors'
              }
            },
          }
        };

        $scope.center = {};
        $scope.markers = {};

        $scope.$watch('coordinates', function(coordinates) {

          if (!coordinates) {
            return;
          }

          $scope.center = {
            lat: $scope.coordinates.latitude,
            lng: $scope.coordinates.longitude,
            zoom: 16
          };

          $scope.markers = {
            coordinates: {
              lat: $scope.coordinates.latitude,
              lng: $scope.coordinates.longitude
            }
          };

        });

      }
    ]);

})(window, window.angular);

example

<div id="map" class="one-whole push--bottom" map coordinates="ad.geoCoordinates" style="width: 100%; height:300px"></div>

style.css

.leaflet-top, .leaflet-bottom {
  z-index: 4;
}

view.html

<leaflet layers="layers" center="center" markers="markers" height="100%" width="100%"></leaflet>

widget.js

(function (window, angular, undefined) {
  'use strict';

  angular.module('shell')
    .directive('map', [function() {

      return {
        restrict: 'EA',
        scope:{
          coordinates: '=coordinates'
        },
        templateUrl:'common/shell/ui/map/view.html',
        controller: 'MapController'
      };
    }]);
})(window, window.angular);