AngularJS Leaflet getMap() doesn't work <p>After adding Leaflet to my AngularJS app:</p> <pre><code>&lt;leaflet id="map" defaults="defaults" center="center" bounds="bounds" controls="controls" event-broadcast="events"&gt;&lt;/leaflet&gt; </code></pre> <p>And setting it up:</p> <pre><code>// 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: '&lt;a href="http://osm.org"&gt;OpenStreetMaps&lt;/a&gt;' } }, center: {}, controls: { custom: [drawControl] }, events: { map: { enable: ['click'] } } }); </code></pre> <p>Following this code it doesn't get evaluated (no error shown though):</p> <pre><code>leafletData.getMap().then( function (map) { alert('I have accessed the map.'); } ); </code></pre> <p>This should show me an alert straight away, although nothing happens.</p> <p>If I delay this previous code, for example, running it in a function on a button click, it works!</p> <p>Does anyone knows what could be a problem?</p> <p>Seeing example, it should work: <a href="https://github.com/tombatossals/angular-leaflet-directive/blob/master/examples/control-draw-example.html" rel="nofollow">https://github.com/tombatossals/angular-leaflet-directive/blob/master/examples/control-draw-example.html</a></p> <h1>PARTLY SOLVED</h1> <p>Removing ID from <code>leaflet</code> HTML tag solved the problem. Must be a bug.</p>