Angular.js: directive names should be lower-case

A quirk with directive names I ran into:

When creating new modules, then names should be camel-cased, starting with lower case, e.g. ‘myDirective’.

When making use of directive, the name HAS to be translated to snake-case, otherwise it won’t fire.

 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. 

If you have directive like

angular.module('directives', [])
    .directive('myDirective', function () {
        // your code here
    });

and then

<span myDirective><span> // won't work

<span my-directive><span> // works