AngularJS : all directives from controller if array has changed - angularjs

Question

An area i have some points. By default all disabled to draggable. If user click on edit link the point with 43 position should be draggable. but point still have disable state and watch function not executing..
jsFiddle
HTML
<div ng-app="myapp" ng-controller="MainController">
Make point 43 draggable
<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 = [];
for (var i = start; i < end; i++) {
var point = {};
point.location = i + 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 from zero
};
$scope.edit = function (id) {
$scope.courtPoints[42].allowDrag = true;
$scope.courtPoints[42].location = '2014';
};
$scope.init();
}]);
angular.bootstrap(document, ['myapp']);

Answer 1

I think you want to enable the dragging element when user click on the "Make point 43 draggable".
On your fiddle you forgot to add jQueryUI so the draggable function is not working and return undefined.
And one more thing, your draggable function need to specify which element to disable dragging on the cancel attribute, in this case you specify a tag "a" which is not correct because you want to disable the dragging on the yellow circle which is a "div" inside "li" tag. I have used:
ng-class
which add a "disable" class when your allowDrag attribute object is false. You can change the draggable function as 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 your markup html like this :
<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 be dragging disabled initially.
And now when you click on
Make point 43 draggable
Button 43 should be dragging enabled.
Working fiddle : http://jsfiddle.net/themyth92/gd2kzps2/