Q:

AngularJS directive not recognised when starting with data-*

I'm new to AngularJS.  Need some help with the directive I created. 
This is My HTML:
<data-table template-url="dataTable.html" info="someData"></data-table>

I get "someData" from server in my controller - directive.js:
app.directive('dataTable', function() {
 return{
    restrict: 'E',
    scope: {
        data : '=info'
    },
    link: function($scope,elem,attrs){
         ///some code here. 
    },
    templateUrl : function(elem, attrs) {
        return attrs.templateUrl;
    }
});

The issue is when I debug my code, it come to the directive by doesn't go inside. ( I used javascript debug in chrome).  Is there anything I'm missing.  The restrict Tag is proper, name is correct what else is needed?  I did look at the similar questions but couldn't find any solution.  Here is a fiddle : Demo

A:

You can't use directive names starting with data-* because its reserved by AngularJS ng core namespaces.  Just use an other name to start with and you will be fine. 
<my-data-table template-url="dataTable.html" info="someData"></my-data-table>

And your directive:
myApp.directive('myDataTable', function() {
  return {
    scope: {
      data: '=info'
    },
    link: function($scope, elem, attrs) {
      ///some code here. 
      console.log(attrs.templateUrl);
    },
    templateUrl: function(elem, attrs) {
       return attrs.templateUrl;
    }
  }
});

