title: How to set different ID's in Angular for HTML elements added with angular.append
body: <p>Having this code in my directive that holds a leaflet map:</p>
  
  <pre><code>angular.element($elem[0]).append(angular.element('&lt;div id="map" style="width: 100%; height: calc(100% - 25px); border: 1px solid #ccc"&gt;&lt;/div&gt;'));
  
  map = new L.Map('map', {layers: [osm], center: new L.LatLng(center[0], center[1]), zoom: 10});
  </code></pre>
  
  <p>How do I set different id's for each copy of the directive that I add? This way I could have several copies of the map on screen, instead of the only one I have at the moment. Thank you.</p>