Q:

Clean way to copy element text into title attribute with AngularJS

I have something like this in a table:
<tr ng-repeat="book in books">
  <td title="{{book.title}}">{{book.title}}</td>
  <td title="{{book.author}}">{{book.author}}</td>
</tr>

I am using CSS to show ellipses on overflow and I would like a tooltip to show up when hovering that shows the full intended contents of the cell, thus the use of the title attribute.  In the example above it is not too bad, but in other cases I have more complicated AngularJS expressions with filters and such and I hate having to repeat the same thing in both the contents and the title attribute.  
Can I use some sort of AngularJS magic (directive perhaps?) to automatically copy the generated element contents into the title attribute (or vice versa), and if so how do I do that?
Sorry if this is a newbie question, but I'm an AngularJS newbie, and my Google attempts to find a solution came up short.

A:

You can write a very simple directive that would simply get inner content and set it as a title:
app.directive('contentTitle', function($timeout) {
    return {
        link: function(scope, element) {
            $timeout(function() {
                element[0].title = element[0].textContent;
            });
        }
    };
});

and use it like this:
<tr ng-repeat="book in books">
    <td content-title>{{book.title}}</td>
    <td content-title>{{book.author}}</td>
</tr>

Note 1: I wrapped code into $timeout to ensure that it's run after element content is properly interpolated.
Note 2: If you support IE8, then you should use innerText for it, then cross-browser way would be element[0].textContent || element[0].innerText.
Demo: http://plnkr.co/edit/rXgHwaeScsQdYlFMC7yR?p=preview

