Angular js Custom Directive on element with ng-repeat - Can't set CSS classes

I'm trying to use a custom directive on an element with ng-repeat, like so:

<article ng-repeat="product in ctrl.products" class="product entity" product="product" selected-retailer="ctrl.selectedRetailer"></article> 

I've read that, in order for this to work, you need to set the priority on your custom directive to something higher than the ng-repeat directive. So I've defined my directive like so, setting the priority to 1001:

angular.module('MainApp') .directive('product', function () { return { restrict: 'A', scope: { product: '=', selectedRetailer: '=' }, priority: 1001, templateUrl: '/Static/Templates/product.html', link: function ($scope, $element, $attributes) { $element.addClass('testCssClass'); } }; }); 

...and this works, it loops through my products.

The problem is, I'm also trying to set a CSS class on the directive's element (article) using:

$element.addClass('testCssClass'); 

...in the link function, but it doesn't seem to work.

But if I remove ng-repeat and just show first product item, like so:

<article class="product entity" product="ctrl.products[0]" selected-retailer="ctrl.selectedRetailer"></article> 

...the CSS class shows up just fine (i.e. "product entity testCssClass").

How can I get this to work with ng-repeat?