Angular: Directive Handicap

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="MyWidget.html">
<ul>
    <li class="draggable" ng-repeat="s in t">{{s}}</li>
</ul>    
</script>


<div ng-controller="test">
    <my-widget></my-widget>
</div>

CSS

li.draggable{
 height:100px;
width:100px;
 background:#ccc;   
 float: left;
margin:10px;    
}

JavaScript

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

myApp.directive('myWidget', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        templateUrl: 'MyWidget.html',
        controller: function($scope, $timeout) {
            console.log($scope, $timeout);
            $timeout( function() {
                alert('content loaded');
                $('.draggable').draggable();
            });
        },
        link: function(scope, elm, attr) {
            scope.t = [1, 2, 3, 4];

        }
    }
});
    
    function test($scope){

    }
/*
setTimeout(function() {
    alert('setting draggable manually');
    $('.draggable').draggable();

}, 5000)  
*/