Angular UI draggable and droppable directives (coffee)

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<div ng:controller="controller">
    <ul uiw:sortable ng:model="list">
        <li ng:repeat="item in list" class="item" ui:draggable ng:model="item" ui:options="{ revert: true }">{{item}}</li>
    </ul>
    <hr />
    <ul ui:droppable ui:options="{ drop: onDrop }">
        <li ng:repeat="item in list2" class="item">{{item}}</li>
    </ul>
    <div ng:repeat="item in list">{{item}}</div>
</div>

<script src="http://code.angularjs.org/1.0.2/angular.min.js"></script>
<script src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.min.js"></script>

CSS

.item, .placeholder {
    padding: 2px;
    width: 50px;
    height: 20px;
    border: 1px solid #333;
    background: #EEE;
}

.placeholder {
    background: #AEF;
}

CoffeeScript

myapp = angular.module 'myapp', ['ui']

myapp.controller 'controller', ($scope) ->
    $scope.list = ["one", "two", "three", "four", "five", "six"]
    $scope.list2 = ["drop"]
    $scope.onDrop = (item) ->
        $scope.list2.push item          
    
myapp.directive 'uiDraggable', ['ui.config', (uiConfig) ->
  options = {}
  if uiConfig.draggable?
    angular.extend(options, uiConfig.draggable)

  require: '?ngModel'
  link: (scope, element, attrs, ngModel) ->
    opts = angular.extend({}, options, scope.$eval(attrs.uiOptions))

    if ngModel?      
      _start = opts.start
      opts.start = (e, ui) ->
        element.data('ui-draggable-item', ngModel.$modelValue)
        _start?(e, ui)
        scope.$apply()
      
      _update = opts.update
      opts.update = (e, ui) ->
        _update?(e, ui)
        scope.$apply()

    # Create draggable
    element.draggable(opts)

]
    
myapp.directive 'uiDroppable', ['ui.config', (uiConfig) ->
  options = {}
  if uiConfig.droppable?
    angular.extend(options, uiConfig.droppable)

  link: (scope, element, attrs) ->
    opts = angular.extend({}, options, scope.$eval(attrs.uiOptions))

    if opts.drop?
      _drop = opts.drop
      opts.drop = (e, ui) ->
        _drop?(ui.draggable.data('ui-draggable-item'))
        scope.$apply()

    # Create droppable
    element.droppable(opts)

]


angular.bootstrap document, ['myapp']