Angular: Directive Transclude

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>
<script type="text/ng-template" id="MyDirective.html">
    <div id="directive">
        value: <b>{{ value }}</b>
    </div>
</script>

<span ng-controller="Parent">
    <ul>
        <!-- why does this fail... -->
        <li ng-repeat="fail in fails"> 
            <my-directive value="{{ fail }}"></my-directive>
        </li>
        
        <!-- ...yet this work -->
        <li>
            <my-directive value="{{ success }}"></my-directive>
        </li>
   </ul>
</span>

CSS

div { padding: 10px; margin: 3px; border: 2px solid #ccc; }
b { font-size: 19px }

JavaScript

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

function Parent( $scope )
{    
    $scope.fails = ['fail', 'fail', 'fail'];
    $scope.success = 'success';
}

function MyDirective( $scope ){}
        
myModule.directive('myDirective', function()
{
    return {
        restrict: 'E',
        replace: true,
        scope: {
            value: '@'
        },
        template: '<div id="directive">value: <b>{{ value }}</b></div>',
    }
});