Problem ng-click with Angularjs

Question

I have a button:

<a ng-click="like">Gostar</a>

When someone clicks on it, perform the action and it is replaced by jQuery by the other button:

<a ng-click="unlike">Desgostar</a>

But when you click on the replaced buttons, they do not perform any action. The function of the ng-click does not work, only when they are overwritten, when reload the page works normal. Someone knows how to fix this?

Answer 1

This is because the new content has not passed through the Angular compiler.

This is an example of pre-compilation before inserting content via jQuery:

$("#conteudo").html(
  $compile(
    "<button ng-click='count = count + 1' ng-init='count=0'>Increment</button><span>count: {{count}} </span>"
  )(scope)
);

Hint - Instead of manipulating DOM objects, control visibility within Angular. Example:

<a ng-click="like" ng-if="!item.liked">Gostar</a>
<a ng-click="unlike" ng-if="item.liked">Desgostar</a>

So your application displays a button or the other depending on the property liked of the object item.