Disable jquery UI dragging when Item dragged in Angularjs

Question

In my Angularjs app i have a list of items that user can drag each item.each item is directive and named it simple-element:

app.directive('simpleElement',function(){
 return {
  restrict:'AE',
  template:'<span>Item</span>',
  controller:function(){

  },
  link:function(scope,element,attrs){
   element.draggable({
    revert:true,
    helper:'clone'
   });
  }
 }
});

now I want when user drag each item even is drag is successful or not , make dragging event of item disabled so user can not drag item again. i create a sample on Plunker with drag and drop functionality.

Answer 1

I find the solution. i do not know this is a best practice or not but it work for me. i insert these line of code in link function:

 $scope.$watch('item.visible',function(){

                //Enable Disableing when Item draged
                if($scope.item.visible == false){
                    element.draggable( "disable" );
                }
                if($scope.levelModel.visible == true){
                    element.draggable( "enable" );
                }
            });

first watch the visible property of model.then if the property change in model i decide to enable or disable the element.