Angular: Directive Handicap

http://angularjs.org/

HTML

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="https://raw.github.com/cowboy/jquery-resize/v1.1/jquery.ba-resize.min.js"></script>



<div ng-app ng-controller="test">
   <button ng-click="addmore()">Add</button> 
    <ul>
        <li 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>
</div>

CSS

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

JavaScript

$(document).ready(function() {
    
    $("ul").resize(function(e) {
        console.info("ready!")
        $(".draggable").draggable();
    });


  

});

function test($scope, $http) {
   
    $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
                    $scope.t = []                            
        
                    for (var i = 0; i < data.items.length; i++) {
                        $scope.t.push(data.items[i]);
                    }

                    $scope.$apply();
                  
                });
    }
}