ng-click not working in font-awesome icon

Question

I have added my demo to: this link When I click on thumbs up (comes from fontawesome) ng-click does not trigger and like count does not change. When I click to xyz, like count increases.

This is not working:

<i ng-click="LikeComment(comment)" class="far fa-thumbs-up"></i> {{comment.like}} 

But this is working:

<i ng-click="LikeComment(comment)">xyz</i> {{comment.like}}

Answer 1

Try this:

<span ng-click="LikeComment(comment)"><i class="far fa-thumbs-up"></i></span>{{comment.like}}

OR , in case you are ok with a button

<button ng-click="LikeComment(comment)"><i class="far fa-thumbs-up"></i></button>{{comment.like}}

Answer 2

Font awesome turns it into a <svg> tag which doesn't seem to collaborate too well with the click handler. Try wrapping the <i> in a <div> like this

https://jsfiddle.net/wewekvkw/26/