AngularJS directive is not working

Please find below the directive which i wrote,

angular.module('netVogue.directives', []).
  directive('set-First-Active', function() {
      return function(scope, element, attrs){
          alert('sample');
          element.addClass("active");     
      };
  });

I have added this directive to my module in below way,

angular.module('netVogue', ['netVogue.filters', 'netVogue.services', 'netVogue.directives']);

I used this directive in my template in following format,

<div class="item" ng-repeat="viewPrintcampaign in viewPrintcampaigns" ng-init="first=$first" set-First-Active> 
</div>

However, i neither see any response of alert nor class is getting added. Can someone please help me with this? Due to some dependency, i don't want to use 'ng-class' but want to add class='active' for the first element of ng-repeat.

Any help would be greatly appreciated. Thanks in advance.