AngularJS – dynamic canonical tag on several pages

I have an AngularJS application and on some pages I want to add the canonical tag and I don’t know what is the best way to implement this.

At the beginning I thought at adding a custom directive in the index.html file like <canonical-tag></canonical-tag> and display the tag based on the current page, but I don’t know if having a custom tag in the source is ok for the google crawler.

I also thought at something like, insert from the controller of each page that tag in the head tag but I guess that whenever I move to another page I have to remove it or something like that.

What is the best approach for in this situation? Thx

Source: AngularJS