AngularJS : all directives from controller if array has changed -

an area have points. default disabled draggable. if user click on edit link point 43 position should draggable. point still have disable state , watch function not executing..

jsfiddle

html         <div ng-app="myapp" ng-controller="maincontroller">     <a  href="#" ng-click="edit(43)">make point 43 draggable</a>       <ul class="court">                <li  ng-repeat="point in courtpoints" droppable data-location="{{point.location}}">                    {{point.location}}                  <div class="draggable-point draggable-point-location"                        location-point-draggable ng-show="point.marker==true"></div>                </li>            </ul>     </div>  js var myapp = angular.module('myapp', []);  myapp.directive('locationpointdraggable', function () {     return {         restrict: 'a',         link: function (scope, element, attrs) {             element.draggable({                 containment: '.court',                 cursor: 'move',                 cancel: 'a',                 revert: 'invalid',                 snap: 'true',                 stop: function (event, ui) {                 }             });          }     }; });  myapp.controller('maincontroller', ['$scope',  function ($scope) {          array.range = function (start, end) {             var arr = [];              (var = start; < end; i++) {                 var point = {};                 point.location = + 1;                 point.marker = false;                 point.allowdrag = false;                   arr[i] = point;             }             return arr;         };          $scope.init = function () {             $scope.courtpoints = array.range(0, 50);             $scope.courtpoints[42].marker = true; //42 because start 0         };          $scope.edit = function (id) {             $scope.courtpoints[42].allowdrag = true;             $scope.courtpoints[42].location = '2014';         };          $scope.init();     }]);  angular.bootstrap(document, ['myapp']); 

i think want enable dragging element when user click on "make point 43 draggable". on fiddle forgot add jqueryui draggable function not working , return undefined. , 1 more thing, draggable function need specify element disable dragging on cancel attribute, in case specify tag "a" not correct because want disable dragging on yellow circle "div" inside "li" tag. have used:

ng-class  

which add "disable" class when allowdrag attribute object false. can change draggable function follow:

myapp.directive('locationpointdraggable', function () {   return {     restrict: 'a',     link: function (scope, element, attrs) {         element.draggable({             containment: '.court',             cursor: 'move',             cancel: '.disable',             revert: 'invalid',             snap: 'true',             stop: function (event, ui) {              }         });      }   }; }); 

and change markup html :

<div class="draggable-point draggable-point-location"       location-point-draggable       ng-show="point.marker==true"       ng-class='{"disable" : !point.allowdrag, "":point.allowdrag}' </div> 

button 43 should dragging disabled initially. , when click on

<a href="#" ng-click="edit(43)">make point 43 draggable</a> 

button 43 should dragging enabled. working fiddle : http://jsfiddle.net/themyth92/gd2kzps2/