добавить класс к элементу по id из директивы

Я добавляю разбивку на страницы в одном из своих представлений, и хочу, чтобы текущая страница загружала class="active" загрузки class="active". Поскольку существует только один файл HTML, и текущая страница передается через $routeParams и количество страниц может меняться, мне нужно создать разбиение на страницы с помощью ng-repeat и добавить после этого активный класс. Я сделал директиву, которая должна это сделать после создания правильного <li>, но он этого не делает. Я не знаю, все еще проблема с хронологическим порядком разрешаемых выражений или если мне нужно поместить элемент DOM по-другому из директивы.

Ссылка на Plunker здесь

Код:

<ul class="pagination pagination-sm">
    <li ng-repeat="p in pages()" id="{{p}}" mark-active-page page="{{currentpage}}" repeat="{{p}}"><a href="">{{p}}</a></li>
</ul>

Функция и переменные контроллера:

$scope.currentpage = 1;
$scope.pagecount = 4; //total pages

$scope.pages = function() {
    var input = [];
    for (var i = 1; i <= $scope.pagecount; i++) {
        input.push(i);
    }
    return input;
};

Директива (позже может стать более чистой. Atm мой фокус находится на jQuery):

app.directive('markActivePage', function($parse) {
    return {
        restrict: 'A',
        scope: {
            page: '@',
            repeat: '@',
        },
        link: function(scope, elem, attrs) {
            attrs.$observe('repeat', function(r){
                attrs.$observe('page', function(p){
                    if(r==p) {
                        var id = '#' + p;
                        //I get the right id here without a problem, but the jQuery doesn't work
                        angular.element(id).addClass('active');
                    }
                });                  
            });          
        }
    };
});