AngularJS Leaflet getMap() doesn't work - angularjs

Question

After adding Leaflet to my AngularJS app:
<leaflet id="map" defaults="defaults" center="center" bounds="bounds" controls="controls" event-broadcast="events"></leaflet>
And setting it up:
// Initialise the feature group to store editable layers
var drawnItems = new L.FeatureGroup();
// Initialise the draw control
var drawControl = new L.Control.Draw({
position: 'topright',
edit: {
featureGroup: drawnItems
}
});
// Configure Leaflet
angular.extend($scope, {
defaults: {
zoomControlPosition: 'topright',
minZoom: 3,
tileLayerOptions: {
detectRetina: true,
reuseTiles: true,
attribution: 'OpenStreetMaps'
}
},
center: {},
controls: {
custom: [drawControl]
},
events: {
map: {
enable: ['click']
}
}
});
Following this code it doesn't get evaluated (no error shown though):
leafletData.getMap().then(
function (map) {
alert('I have accessed the map.');
}
);
This should show me an alert straight away, although nothing happens.
If I delay this previous code, for example, running it in a function on a button click, it works!
Does anyone knows what could be a problem?
Seeing example, it should work: https://github.com/tombatossals/angular-leaflet-directive/blob/master/examples/control-draw-example.html
PARTLY SOLVED
Removing ID from leaflet HTML tag solved the problem. Must be a bug.

Answer 1

You are supposed to pass the id specified in the <leaflet> tag to getMap() function.
In your example, the id is map. You would pass it like this:
leafletData.getMap("map").then(
function (map) {
alert('I have accessed the map.');
}
);