Angular: Empty Fiddle

http://angularjs.org/

HTML

<div ng-controller="MyCtrl">
    <table>
        <tr>
            <td ng-click="reverse=!reverse;predicate='id'">id</td>
            <td ng-click="reverse=!reverse;predicate='name.first'">name</td>
        </tr>
        <tr ng-repeat="user in users | orderBy:predicate:reverse">
            <td my-directive url="{{user.name.first}}">{{user.id}}</td>
            <td>{{user.name.first}}</td>
        </tr>
    </table>
</div>

JavaScript

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

myApp.directive('myDirective', function () {
    return {
        restrict: 'A',
        scope: {
            url: '@'
        },
        controller: function ($scope) {
            console.log($scope.url);
        }
    }
});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.users = [{
        id: 1,
        name: {
            first: "bob"
        }
    }, {
        id: 2,
        name: {
            first: "jack"
        }
    }, {
        id: 3,
        name: {
            first: "alice"
        }
    }]
}