Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>
<div ng-controller="MyCtrl">
  Hello, {{name}}!
    <dir info='spec'>
        {{data}}
    </dir>
</div>

JavaScript

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.spec = 'Super';
}

myApp.directive('dir', function(){
    return {
      restrict: 'AE',
      scope:{
        data: '=info'
      },
      transclude:true,
      compile: function (element, attr, linker) {
          return function (scope, element, attr) {
          linker(scope, function(clone){
                element.append(clone); // add to DOM
          });
          };
      }
    }
});