AngularJS - JQuery Droppable

Question

Я сталкиваюсь с проблемой, реализующей простой jQuery, сбрасываемый в приложении AngularJS.

По какой-то причине код работает на отдельной странице, которую я настроил на Fiddle: http://jsfiddle.net/65FMq/3/

Однако по какой-то причине, когда я добавляю тот же код в myApp, он не работает. По сути, как только вы запустите приложение (index.html), вы окажетесь на домашней странице, которая включает в себя app.js, другие контроллеры, css и т. Д.

Затем, когда вы щелкнете по пункту меню "Фото", я покажу состояние "фотографии" (это отдельный HTML-файл). Оттуда пользователь может затем выбрать одну из фотографий, которые он / она хотел бы приобрести, и когда он нажимает кнопку "Купить" с помощью ng-клика "buyPhoto(photos)", я скрываю div, показывающий доступные фотографии, и показываю Div с более подробной информацией об этом фото.

Там, помимо информации на фотографии, я также показываю сетку со всеми возможными размерами, в которых пользователь может заказать фотографию, и ему нужно будет перетащить размер, который он хотел бы, на панель заказа (область раскрытия)). Однако по какой-то причине я не получаю эффект перетаскивания, даже если загружаются необходимые файлы jquery css/js и миниатюра фотографии (которая будет ячейкой в ​​скрипте выше) установлена ​​на перетаскивание.

Вот мой app.js:

angular
.module('app', [
    'ui.router'
])
.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('/');

    $stateProvider
        .state('home', {
            url: '/',
            templateUrl: 'partials/home.html'
        })
        .state('photos', {
            url: '/photos',
            templateUrl: 'partials/photos.html',
            controller:  'photosCtrl',
            resolve: { photos: ['$http', function($http){
                        return $http.get('api/photos.json').then(function(response){
                            return response.data;
                        });
                    }]
            }                       
        })  

}]);

Вот мой photosCtrl:

angular.module('app')
 .controller('photosCtrl', ['$scope', '$http', 'photos', function($scope, $http, photos) {

$scope.photos       = photos;

$scope.buyPhoto = function(photos) {                    
    document.getElementById('photos_available').style.display = 'none'; 
    document.getElementById('photo_buy').style.display = 'block';   

    $scope.photo_name   = photos.photo_name;
    $scope.image        = photos.image;
    $scope.description  = photos.description;
    $scope.date_taken   = photos.date_taken;
    $scope.price        = photos.price; 
    $scope.rows         = 3;
    $scope.cells        = 3;
    $scope.getNumber = function (num) {
           return new Array(num);
    }       


}])
.filter('character',function(){
return function(input){
    return String.fromCharCode(64 + parseInt(input,10));
};
});


$(document).ready(function () {
$("#cell-container ul.rows li.draggable").draggable({
    appendTo: "body",
    helper: "clone"
});
$("#droppable ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ":not(.ui-sortable-helper)",
    drop: function (event, ui) {
        $(this).find(".placeholder").remove();
        $("<li></li>").text(ui.draggable.text()).appendTo(this);
    }
});
});

HTML (фрагмент) в частичном HTML-файле Photos (который содержит информацию о том, где происходит угловое повторение, чтобы сгенерировать требуемые ячейки и строки и показать, что строки получают перетаскиваемый класс):

    <div class="cell-selection-container" id="cell-container">
        <ul class="rows">
            <li class="row" ng-repeat="i in getNumber(rows) track by $index">
                <ul class="cells">
                    <li class="cell draggable" ng-repeat="i in getNumber(cells) track by $index" id="{{$index+1}}" id="{{$parent.$index+1|character}}{{$index+1}}">
                        <div class="cell-number">{{$parent.$index+1|character}}{{$index+1}}</div>
                    </li>
                    <div class="clear"></div>
                </ul>
            </li>
        </ul>
    </div>
<br>
<br>
<div id="droppable">
    <ol>
        <li class="placeholder">drop stuff here</li>
    </ol>
</div>