jquery-ui AngularJS 1.0.0rc1

Drag and Drop demo of jquiModule updated for AngularJS 1.0.0rc1

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc2.js"></script>
<!-- https://github.com/danielzen/angular-jquery-ui -->
<div ng-app="jquiModule" ng-controller="DndDemo" ng-cloak>

<h1>jQuery UI Drag and Drop Demo</h1>
  <div jqui-drop-accept="acceptToken(list1, $token)"
       jqui-drop-commit="commitToken(list1, $token)">
    <h2>Drag these boxes</h2>
    <div ng-repeat="item in list1"
         jqui-drag-start="dragStart(item, list1)"
         jqui-drag-end="dragEnd(item)">{{item.name}} {{item.dragging}}</div>
  </div>

  <div jqui-drop-accept="acceptToken(list2, $token)"
       jqui-drop-commit="commitToken(list2, $token)">
    <h2>Drop them here</h2>
    <div ng-repeat="item in list2"
         jqui-drag-start="dragStart(item, list2)"
         jqui-drag-end="dragEnd(item)">{{item.name}} {{item.dragging}}</div>
  </div>
</div>

CSS

html, body {
  margin: 0;
  padding: 0;
  line-height: 1em;
  font-family: Arial, sans-serif;
}

h1 {
    font-size: 1.5em;
    padding: 0.5em;
}

h2 {
  font-size: 1.2em;
  padding: 0 0.5em 0.5em 0;
  margin: 0;
}

.jqui-dnd-target {
    border: 2px solid #666;
    float: left;
    width: 300px;
    height: 12em;
    margin-left: 1em;
    padding: 1em;
  -webkit-box-shadow: 5px 5px 3px 2px #ccc;
  -moz-box-shadow: 5px 5px 3px 2px #ccc;
  box-shadow: 5px 5px 3px 2px #ccc;
}

.jqui-dnd-item {
  border: 1px solid #ccc;
  padding: 0.5em;
  margin: 0.5em 0;
  background-color: #eee;
}

.jqui-dnd-target-active {
  border: 2px solid green;
}

.jqui-dnd-target-over {
  border: 2px solid lightgreen;
}

.jqui-dnd-item-over {
  background-color: lightgreen;
}

.jqui-dnd-item-dragging {
  border-color: green;
  -webkit-box-shadow: 0 0 5px 3px #666;
  -moz-box-shadow: 0 0 5px 3px #666;
  box-shadow: 0 0 5px 3px #666;
}

JavaScript

function DndDemo($scope) {
  $scope.list1 = [{name:'one'}, {name:'two'}, {name: 'three (reject)', reject: true}, {name: 'four'}];
  $scope.list2 = [];

  $scope.dragStart = function(item, list){
    item.dragging = '(dragging)';
    return {src: list, item:item};
  };
  $scope.dragEnd = function(item){
    delete item.dragging;
  };

  $scope.acceptToken = function(to, token){
    return token.src != to && !token.item.reject;
  };

  function removeItemFromArray(item, array) {
    array.splice(array.indexOf(item), 1);
  }

  $scope.commitToken = function(to, token){
    removeItemFromArray(token.item, token.src);
    to.push(token.item);
  };
}

(function(){
  function evalFn(element, scope, exp, property){
    property = property || '$token';
    return function(token){
      var old = scope.hasOwnProperty(property) ? scope[property] : undefined;
      scope[property] = token;
      var retVal = scope.$eval(exp, element);
      scope[property] = old;
      return retVal;
    };
  };

  angular.module("jquiModule", [])
    .directive('jquiDragStart', function ($compile) {
      return {
        link:function (scope, item, attrs) {
          var dragStartExp = attrs.jquiDragStart || '';
          var dragEndExp = attrs.jquiDragEnd || '';
          var handle = attrs.jquiHandle || false;
          var axisExp = attrs.jquiAxis;

          item.addClass('jqui-dnd-item');

          var dragStart = evalFn(item, scope, dragStartExp);
          var dragEnd = evalFn(item, scope, dragEndExp);
          var token;

          item.draggable({
            addClass:false,
            handle:handle,
            start:function (event, ui) {
              item.draggable('option', 'revertDuration', 200);
              item.addClass('jqui-dnd-item-dragging');
              item.data('jqui-dnd-item-token', token = dragStart());
              scope.$apply();
            },
            stop:function () {
              item.removeClass('jqui-dnd-item-dragging');
             ...