Map popups and Angular: How to do?

[louh]

Map popups should be Angular templates so that content / data in them can also be bound in the Angular app.

How to trigger? Usually events on the map (like a click) are done via the leaflet.js library itself. Does adding an ng-click to the map work? Can / should leaflet's event listener fire Angular directives?

EDIT:

This issue should be reworded / rephrased now that the map is using Google Maps API. Map events are working property and so are popups. Right now the challenge is binding infowindow content to Angular models. Why it's not working out of the box:

• Adding HTML template code to infowindow content in the Google Maps API manner isn't picked up by Angular, so it's not actually data bound.
• On the opposite side of things, pre-compiling Angular content for the infowindow is actually asynchronous, which means Google Maps will open an infowindow displaying content from previous (if any). the compiled content will happen, but not be displayed until the next time infowindow is opened again.

Solutions (how to implement??)

• Figure out how to make infowindow template data-bound to Angular
• ... or, set up a promise so infowindows don't display until AFTER they've been compiled. (May seem slow because of AJAX calls that need to be made.)

[louh]

Figured out a workable solution. The magic words are:

$scope.infowindow.setContent('content')

https://developers.google.com/maps/documentation/javascript/infowindows

The setContent() takes care of updating the info window. This is NOT an Angular data-binding solution. The logic for compiling the HTML will need to happen in the controller to output to the map view. However, because the method changes the DOM itself, we don't need to have a promise to wait for the data fetching/compiling to happen first.