AngularJS ng-click inside innerHTML

Question

I have this code below:

acrossText = acrossText + activeWordList[w].placeOrder + ". " + activeWordList[w].clue + "<button ng-click='speak()'>Speak</button> " + "<br /><br />";
document.getElementById('div1').innerHTML = acrossText;

However ng-click="speak()" inside innerHTML is not firing. What's wrong?

Answer 1

A couple of things here:

1. The ng-click directive has already run, so it doesn't know about your dynamically added element.

2. Dynamically adding content using innerHTML, or the like, is generally frowned upon when using angular. This looks like you are trying to re-create the functionality of a directive I would suggest going this route, as it will give you the tools you need to fix your code.

Answer 2

The code is not being compiled. You must compile it using $compile.

https://docs.angularjs.org/api/ng/service/$compile