Angular: Directive Handicap

http://angularjs.org/

by eprouver

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

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


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

CSS

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

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) {
            $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].title);
                    }

                    $timeout(function() {
                        alert('content loaded');
                        $('.draggable').draggable();
                    });
                });
            }

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

        }
    }
});

function test($scope) {

}