ng-transclude showing element twice

Question

Why does this transcluded directive repeat Name inside directive = Frank twice?

I thought I understood transclusion but this has me confused.

Here's a fiddle

<div ng-app="myApp" ng-controller="myController">
    <my-directive>Name in outer controller scope = {{name}}<my-directive/>
</div>


var app = angular.module("myApp", []);
app.controller("myController", function ($scope) {
    $scope.name = 'George';
});
app.directive("myDirective", function () {
    return {
        restrict: 'E',
        scope: {},
        transclude: true,

        template:   '<div ng-transclude></div>' +
                    '<span>Name inside directive = {{name}}</span>',

        link: function (scope) {
            scope.name = 'Frank'
        }
    };
});

Answer 1

Simply because you didn't close your tag correctly

</my-directive> instead of <my-directive/>