AngularJS directive is not working

Question

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.

Solution

When declaring directive should has camel case name (setFirstActive).

See developer guide on directives.

Directives have camel cased names such as 'ngBind'. The directive can be invoked by translating the camel case name into snake case with these special characters :, -, or _. Optionally the directive can be prefixed with x-, or data- to make it HTML validator compliant. Here is a list of some of the possible directive names: ng:bind, ng-bind, ng_bind, x-ng-bind and data-ng-bind.