AngularJS directive name starts with a number, cannot make it work.

Question

here is my code:

app.directive('3dPlansSlider', function(){
  return {
    controller: 'projectCtrl',
    restrict: 'E',
    templateUrl: 'views/3dPlansSlider.html',
    link: function(scope, element, attrs){

    }
  }
});

This is a fairly standard fact, all of my directives have exactly this code, but it seems that I can’t import it into my html using the element created by it. I am wondering if there is a way to make it work, or is it impossible to make it work, since it starts with a number?

Here is the html:

<3d-plans-slider></3d-plans-slider>

On this page, he does not say any errors, he simply prints <3d-plan-slider> (as if it were the main character), but he does not print the closing tag ... I’m about to rename it, but I realized that it should be way to make it work.

Answer 1

, -data :

<data-3d-plans-slider></data-3d-plans-slider>

app.directive('3dPlansSlider', function(){
  return {
    controller: 'projectCtrl',
    restrict: 'E',
    templateUrl: 'views/3dPlansSlider.html',
    link: function(scope, element, attrs){

    }
  }
});