Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://code.angularjs.org/1.2.4/angular.js"></script>
<div ng-controller="MyCtrl">
  <div ng-repeat="col in allfood" class="coursebox" my-sortable-course>
      <h1>{{col.name}}</h1>
      <div ng-repeat="receipe in col.list" class="itembox">{{receipe.name}}</div>    
  </div>
</div>

CSS

h1{
    font-weight: bold;
    background: #cccccc;
    padding: 3px;
}
.itembox{
    background: #095489;
    color: #ffffff;
    padding: 3px;
    border: 1px solid #ffffff;
}

JavaScript

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.raw = [
        {name: "bacon", price: 23, cat: 'A'},
        {name: "beans", price: 64, cat: 'A'}, 
        {name: "ham", price: 45, cat: 'A'},
        {name: "thee", price: 65, cat: 'B'},
        {name: "baguette", price: 32, cat: 'B'},
        {name: "cheese", price: 34, cat: 'C'}, 
        {name: "wine", price: 19, cat: 'D'},
        {name: "fries", price: 51, cat: 'A'}
    ];
    $scope.sortStuff = function (){
        var sortedRaw = [];
        sortedRaw = { a: {list:[],name:"A"}, b: {list:[],name:"B"}, c: {list:[],name:"C"}, d: {list:[],name:"D"}}
        _.each($scope.raw, function(recp){
            switch(recp.cat){
                case 'A':
                    sortedRaw.a.list.push(recp);
                    break;
                case 'B':
                    sortedRaw.b.list.push(recp);
                    break;
                case 'C':
                    sortedRaw.c.list.push(recp);
                    break;
                case 'D':
                    sortedRaw.d.list.push(recp);
                    break;
            }
        });
        return sortedRaw;
    }
    
    //$scope.allfood = $scope.sortStuff();
    
    $scope.$watch('raw', function(){
        $scope.allfood = $scope.sortStuff();
        console.log($scope.allfood);
    }, true);

    
}


myApp.directive('mySortableCourse', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attr){

            $(element).sortable({
                items:'.itembox',
                receive:function(event, ui) {
                    var issueScope = angular.element(ui.item).scope();
                    scope.$apply(function() {
                        var recp = _.find(scope.raw, function(lineitem){
                            return lineitem.name === issueScope.receipe.name;
             ...