angularJS从ng-repeat获取类名

我有这个html页面：

<div class="row" ng-controller="HomeController as home">
    <section class="tile-column large-2 columns" ng-repeat="container in home.menu" id="{{ container.id }}" tile-column>
        <h1 class="column-title" ng-bind="container.name"></h1>
        <a class="tile {{ tile.classes }}" href="{{ tile.action }}" id="{{ tile.id }}" tile="{{ tile.colour }}" ng-repeat="tile in container.tiles">
            <i class="fa {{ tile.icon }}"></i>
            <span class="title">{{ tile.name }}</span>
        </a>
    </section>
</div>

主控制器如下所示：

// ---
// CONTROLLERS.
// ---
.controller('HomeController', ['Menu', function (menu) {
    var self = this;
    self.menu = menu.current;
}])
// ---
// SERVICES.
// ---
.factory('MenuService', function () {
    var get = function () {
        return [{
            id: 'items',
            name: 'Items',
            tiles: [{
                id: 'customer-services',
                name: 'Customer services',
                action: '/customer-services',
                icon: 'fa-arrow-circle-down',
                classes: 'x-large',
                colour: 'pink'
            }, {
                id: 'distribution',
                name: 'Distribution',
                action: '/distribution',
                icon: 'fa-arrow-circle-down',
                colour: '#000000'
            }, {
                id: 'compaints',
                name: 'Complaints',
                action: '/complaints',
                icon: 'fa-arrow-circle-down',
                colour: ''
            }, {
                id: 'sampling',
                name: 'Sampling',
                action: '/sampling',
                icon: 'fa-arrow-circle-down',
                colour: ''
            }, {
                id: 'manufacturing',
                name: 'Manufacturing',
                action: '/manufacturing',
                icon: 'fa-arrow-circle-down',
                colour: ''
            }, {
                id: 'warehousing',
                name: 'Warehousing',
                action: '/warehousing',
                icon: 'fa-arrow-circle-down',
                colour: ''
            }, {
                id: 'finance',
                name: 'Finance',
                action: '/finance',
                icon: 'fa-arrow-circle-down',
                colour: ''
            }]
        }, {
            id: 'configuration',
            name: 'Configuration',
            tiles: [{
                id: 'profile',
                name: 'Profile',
                action: '/security/profile',
                icon: 'fa-arrow-circle-down',
                colour: ''
            }, {
                id: 'signout',
                name: 'Sign out',
                action: '/security/logout',
                icon: 'fa-arrow-circle-down',
                colour: ''
            }]
        }];
    };
    return {
        get: get
    };
})
// ---
// MODELS.
// ---
.factory('Menu', ['MenuService', function (service) {
    var get = function () {
        if (Modernizr.localstorage) { // If we have local storage
            var items = angular.fromJson(localStorage['items']); // Try to get our menu items
            if (items) // If we have a result
                return items; // Return our items
        }
        return service.get(); // Otherwise return our default
    };
    var save = function (menu) {
        if (Modernizr.localstorage) { // If we have local storage
            localStorage['items'] = angular.toJson(menu); // Store this class
            current = get(); // Get the latest changes
        }
    }
    var current = get();
    return {
        current: current,
        save: save
    };
}]);

如您所见，磁贴在模型中具有类。我想做的是有一个可以检查每个磁贴的类的指令。我目前已设置：

.directive('xLarge', function () {
    return {
        restrict: 'C',
        link: function (scope, element, attr) {
            console.log('this should work on an extra large tile');
        }
    }
})

我希望开火一次，但它永远不会被击中。谁能想到我将如何让这个指令发挥作用？