Angular: $observe

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="myCtrl">
    <backButton 
        href="#/fruits/{{ fruit.short }}/details" 
        title="Fruit details">
    </backButton>
</div>

JavaScript

var myApp = angular.module('myApp',[]);

myApp.controller( 'myCtrl', function( $scope ) {
    $scope.fruit = {};
    $scope.fruit.short = 'apple';
});

myApp.directive( 'backbutton', function() 
{
    return {
        restrict: 'E',
        terminal: true,
        link: function( scope, element, attrs ) 
        {
            var href    = attrs.href;
            var title   = attrs.title;
            
            // http://docs.angularjs.org/guide/directive#Attributes
            attrs.$observe('href', function ( value ) {
                href = value;
                console.log( "href = " + href ); // #/fruits/apple/details 
                
                element.html('<a href="' + href + '" title="Back to ' + title + '">Back</a>');
            });

            console.log( "href = " + href );    // undefined
            console.log( "title = " + title );  // Fruit details
        }
    };
});