title: How to use Angular directives ng-click and ng-class inside Leaflet marker popup
body: <p>I'm using Angular.JS and Leaflet.JS for a map in my location that has map markers with popups binded to them. I need to use a span with two different icons (one shown in code below) that you can click to call different functions and with ng-class to change the class if certain conditions are met. This is my code:</p>
  
  <pre><code>var marker = L.marker([51.5, -0.09], {icon: blueIcon}).bindPopup('&lt;br&gt;&lt;span ng-class="thumbsUpClass(' + hotelsSelectedDates[i]['hotels'][s] + ')" ng-click="addChoice(' + hotelsSelectedDates[i]['hotels'][s] + ',' + hotels + ')"&gt;&lt;span class="popup-container"&gt;&lt;span class="icon-stack thumbs-up-stack"&gt;&lt;i class="icon-sign-blank icon-stack-base"&gt;&lt;/i&gt;&lt;i class="icon-thumbs-up"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;');
  </code></pre>
  
  <p>However when I inspect the element I get this:</p>
  
  <pre><code>&lt;span ng-class="thumbsUpClass([object Object])" ng-click="addChoice([object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object])"&gt;&lt;span class="popup-container"&gt;&lt;span class="icon-stack thumbs-up-stack"&gt;&lt;i class="icon-sign-blank icon-stack-base"&gt;&lt;/i&gt;&lt;i class="icon-thumbs-up"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
  </code></pre>
  
  <p>The ng-click should send that function both the specific object and the array of objects but when I click the icon nothing happens. In my research I found that the popup prevents event propagation (<a href="https://github.com/Leaflet/Leaflet/issues/301" rel="noreferrer">more info</a> but I'm not sure how to override it or a fix to get it to work with angular. Would anyone have an idea of how to accomplish this?</p>
  
  <p>UPDATE:</p>
  
  <p>Since ng-click/class evaluate a string I fixed the variables to be like this:</p>
  
  <pre><code>$scope.item = hotelsSelectedDates[i]['hotels'][s]
  $scope.set = hotels
  var marker = L.marker([51.5, -0.09], {icon: blueIcon}).bindPopup('&lt;br&gt;&lt;span ng-class="thumbsUpClass(item)" ng-click="addChoice(item,set)"&gt;&lt;span class="popup-container"&gt;&lt;span class="icon-stack thumbs-up-stack"&gt;&lt;i class="icon-sign-blank icon-stack-base"&gt;&lt;/i&gt;&lt;i class="icon-thumbs-up"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;');
  </code></pre>
  
  <p>The html then comes out correctly:</p>
  
  <pre><code>&lt;span ng-class="thumbsUpClass(item)" ng-click="addChoice(item,set)"&gt;&lt;span class="popup-container"&gt;&lt;span class="icon-stack thumbs-up-stack"&gt;&lt;i class="icon-sign-blank icon-stack-base"&gt;&lt;/i&gt;&lt;i class="icon-thumbs-up"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
  </code></pre>
  
  <p>However when I click the icon nothing happens and it doesn't look like the functions are being called. Anyone have any clue why this would happen?</p>