ng-click not executing when built as a string in link function

Question

I'm using Timeline JS to build a timeline. In the timeline there are elements, I want the elements to be click-able.

In my directive link function I build the click able element content like so:

var stringToBeAdded = '<a ng-click="setPage(2)" href="javascript:void(0)">March 10, 2015</a>'

However, after the string is added to the DOM, it does execute the setPage() function within my controller when clicked. The scope is correct.

Answer 1

You need to use the $compile service.

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

Like this:

var stringToBeAdded = $compile('<a ng-click="setPage(2)" href="javascript:void(0)">March 10, 2015</a>')($scope);

Look here for more information:

Insert an angular js template string inside an element