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">
<div>
    <ul>
    <li my-draggable class="draggable" ng-repeat="s in t">
     
        <a href="{{s.link}}" title="{{s.title}}"><img ng-src="{{s.media.m}}" alt="{{s.title}}" /></a>           
        
    </li>
</ul>

    <button ng-click="addmore()">Add</button> 
</div>    
</script>


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

CSS

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

JavaScript

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

myApp.directive('myDraggable', function () {
    return {
        restrict: 'A',
        link: function (scope, elm, attr) {
            console.log(elm);
            elm.draggable();
        }
    };       
});

myApp.directive('myWidget', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        templateUrl: 'MyWidget.html',
        controller: function($scope, $timeout) {
            $scope.addmore = function() {
                $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
                    tags: 'dogs',
                    tagmode: "any",
                    format: "json"
                }, function(data) {

                    //Adding a fake price
                    for (var i = 0; i < data.items.length; i++) {
                        $scope.t.push(data.items[i]);
                    }
                    $scope.$apply();
                });
            }

        },
        link: function(scope, elm, attr) {
            scope.t = [];

        }
    }
});

function test($scope) {

}