angular curly braces inside dom attribute

Question

I'm trying to do an html import with angular to link to a dynamic page.

//SampleController
$scope.id = 1;
//sample.html
<p>{{id}}</p> <!-- 1 -->
<link rel="import" href="/samples/{{id}}">

The <p> tag shows the id however the href attribute gives the error...

cannot GET /samples/%7B%7Bid%7D%7D 404

It seems that the curly braces are not expanding inside the href attribute. Can I do something like this?

Answer 1

Use ng-href

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.

<link rel="import" ng-href="/samples/{{id}}">