Directives that is used in ng-include doesn't work

Question

I have custom directive as following.

var fancySelectDirective = pluginDirecitvesModule.directive("custom-select",function(){
         return { 
           restrict: 'C',
            link: function (scope, element, attrs) {
                  element.fancySelect();
            }
        }
     });

This directive is used in template. When I include this template with ng-include , the directive don't work , that is the link function don't invoked ( I try to debug in console ). but When I use this template directly in page , the directive works. I can't find why this problem occurs.

I use ng-include as following :

<div id="main_wrapper" ng-include="template.html"></div>

The directive is used in template as following:

<select class="custom-select">

Answer 1

It is just a typo customSelect instead of custom-select.

Directive should be declared as a camel case & the caps letter will be replaced by - + small letter, eg. customSelect will written on html as custom-select

Code

var fancySelectDirective = pluginDirecitvesModule.directive("customSelect", function() {
    return {
        restrict: 'C',
        link: function(scope, element, attrs) {
            element.fancySelect();
        }
    }
});

Hope this could help you, Thanks.