<div ng-app='myApp'>
  <div ng-controller='Controller'>
    <my-element-directive></my-element-directive>
  </div>
</div>
var myApp = angular.module('myApp', []);

myApp.controller('Controller', ['$scope', function($scope) {
  $scope.elementName = "Directive with restrict E";
}]);

myApp.directive('myElementDirective', function() {
  return {
    restrict: 'E',
    template: '<h1>{{elementName}}</h1>'
  };
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js