Como usar diretivas angulares ng-click e ng-class dentro do pop-up de marcador de folheto
Eu estou usando Angular.JS e Leaflet.JS para um mapa na minha localização que tem marcadores de mapa com pop-ups vinculados a eles. Eu preciso usar um espaço com dois ícones diferentes (um mostrado no código abaixo) que você pode clicar para chamar funções diferentes e com ng-class para alterar a classe se determinadas condições forem atendidas. Este é o meu código:
var marker = L.marker([51.5, -0.09], {icon: blueIcon}).bindPopup('<br><span ng-class="thumbsUpClass(' + hotelsSelectedDates[i]['hotels'][s] + ')" ng-click="addChoice(' + hotelsSelectedDates[i]['hotels'][s] + ',' + hotels + ')"><span class="popup-container"><span class="icon-stack thumbs-up-stack"><i class="icon-sign-blank icon-stack-base"></i><i class="icon-thumbs-up"></i></span></span></span>');
No entanto, quando eu inspecionar o elemento eu recebo isso:
<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])"><span class="popup-container"><span class="icon-stack thumbs-up-stack"><i class="icon-sign-blank icon-stack-base"></i><i class="icon-thumbs-up"></i></span></span></span>
O ng-click deve enviar essa função tanto para o objeto específico quanto para o array de objetos, mas quando eu clico no ícone nada acontece. Na minha pesquisa, descobri que o pop-up impede a propagação de eventos (mais informações mas não tenho certeza de como substituí-lo ou de uma correção para fazê-lo funcionar com o angular. Alguém teria uma idéia de como fazer isso?
ATUALIZAR:
Uma vez que ng-click / class avalia uma string eu fixei as variáveis para ficar assim:
$scope.item = hotelsSelectedDates[i]['hotels'][s]
$scope.set = hotels
var marker = L.marker([51.5, -0.09], {icon: blueIcon}).bindPopup('<br><span ng-class="thumbsUpClass(item)" ng-click="addChoice(item,set)"><span class="popup-container"><span class="icon-stack thumbs-up-stack"><i class="icon-sign-blank icon-stack-base"></i><i class="icon-thumbs-up"></i></span></span></span>');
O html então sai corretamente:
<span ng-class="thumbsUpClass(item)" ng-click="addChoice(item,set)"><span class="popup-container"><span class="icon-stack thumbs-up-stack"><i class="icon-sign-blank icon-stack-base"></i><i class="icon-thumbs-up"></i></span></span></span>
No entanto, quando clico no ícone, nada acontece e não parece que as funções estão sendo chamadas. Alguém tem alguma idéia de por que isso aconteceria?