How do you get AngularJS to bind to the title attribute of an A tag?

Question

The intent is to have a product name appear in the tooltip of a thumbnail. Browsers do not create a tooltip from "ng-title" or "ng-attr-title."

We are using AngularJS version 1.0.7. You can prepend any attribute with "ng-" or "ng-attr" and Angular will bind accordingly. However, it doesn't seem to "bind" to the title attirbute of the HTML "A" tag.

Ex. 1.

Code: <a title="{{product.shortDesc}}" ...>

Expected result: <a title="Canon Powershot XS50 12MB Digital Camera" ...>

Actual result: <a title="{{product.shortDesc}}" ...> We get undesired braces in the tooltip.

Ex. 2.

Code: <a ng-attr-title="{{product.shortDesc}}" ...>

Expected result: <a title="Canon Powershot XS50 12MB Digital Camera" ...>

Actual result: <a ng-attr-title="Canon Powershot XS50 12MB Digital Camera" ...>

We do not get a plain title attirbute, nor do we get a working tooltip.

Answer 1

It looks like ng-attr is a new directive in AngularJS 1.1.4 that you can possibly use in this case.

<!-- example -->
<a ng-attr-title="{{product.shortDesc}}"></a>

However, if you stay with 1.0.7, you can probably write a custom directive to mirror the effect.