AngularJS directive: Updating the isolated scope - angularjs

Question

I want to create a directive which displays changing data. For simplicity let's say I want to display the current time. This means that once a second the directive needs to refresh itself.
In the docs there is an example for just this case (plunkr), but it procedurally updates the directive's content. I wonder if it could be done using data binding as well.
I imagine something like this:
module.directive('dateTime', function($interval) {
return {
scope: { // start with an empty isolated scope
},
template: '{{currentTime}}', // display time fetched from isolated scope
init: function(isolatedScope) {
$interval(function() {
isolatedScope.currentTime = new Date(); /* update isolated scope */
}, 1000);
},
destroy: function() { /* stop interval */ }
};
}
Is something like that possible? How?

Answer 1

Sure it's possible. The init() function you use in your code must be named link, and the destroy() function must be replaced by a listener on the $destroy event on the element passed to the link function:
module.directive('dateTime', function($interval) {
return {
scope: {
},
template: '{{currentTime}}',
link: function(isolatedScope, element) {
var interval = $interval(function() {
isolatedScope.currentTime = new Date(); /* update isolated scope */
}, 1000);
element.on('$destroy', function() {
$interval.cancel(interval);
});
}
};
}
Working example: http://plnkr.co/edit/rjwYZmR4qJ9Jn28d3jXR?p=preview