AngularJS - custom favicon directive

Question

I want to be able to set the href dynamically with AngularJS. The below works only if the custom field is the only one assigned. If there are multiple custom fields, the below will not work. I am new to AngularJS. Do you know what else I could do?

<link rel="shortcut icon" href="{{user.CustomFields[0].File.Url}}">

Answer 1

The correct way to write this is using the ngHref directive.

<link rel="icon" ng-href="{{user.CustomFields[0].File.Url}}">

Using Angular markup like {{hash}} in an href attribute will make the link go to the wrong URL if the user clicks it before Angular has a chance to replace the {{hash}} markup with its value. Until Angular replaces the markup the link will be broken and will most likely return a 404 error. The ngHref directive solves this problem.

ngHref Documentation

Note: a similar scenario occurs when using img tags. You should use ngSrc in that case