AngularJS : Toggle to modify attribute in directive -

in project working on, applying ui-sort via angular on to-do list , trying toggle work when user editing tasks. current method of testing toggle employing use of button toggle sorting on , off.

my strategy this: employ angular directive generate initial template sorting on. add button which, when clicked, modifies scope variable in controller ($scope.sortingenabled) toggle between true , false. inside directive, have watch set on 'sortingenabled' in link function add/remove sorting attribute .

here in todo.html before tried employing directive: sortableoptions function written re-order todos on internal records.

<ul class="unstyled" ng-model="todos" ui-sortable="sortableoptions"> <!-- list items here via ng-repeat --> </ul> 

the following code in todo.html after directive:

<sortable></sortable> 

and current draft directive inside todo-directives.js:

app.directive('sortable', function() {      var innerhtml = '<li ng-repeat="todo in todos" class="item">' +         '<span ng-model="todo.name" >{{todo.name}}</span> ' +         '</li>';      var link = function (scope, element, attrs) {          scope.$watch('sortingenabled', function() {             if(scope.sortingenabled === true) {                 element.contents().attr("ui-sortable", "sortableoptions");                 //needed else ui-sortable added class <ul>                 //some reason                 element.contents().removeclass("ui-sortable");             }             else {                 element.contents().removeattr("ui-sortable");                 //needed else ui-sortable added class <ul>                 //some reason                 element.contents().removeclass("ui-sortable");             }         });       };     return {         restrict: 'e',         transclude: true,         template: '<ul class="unstyled" ng-model="todos" ui-sortable="sortableoptions"  ng-transclude>' + innerhtml + '</ul>',         link: link     };  }); 

this code works in source code view of chrome's debugger, view not refresh. have tried scope.$apply() within watch function $digest running error. have tried $compile, understanding of how works severely lacking, errors of not remember. missing crucial, or doing things incorrectly? unsure, understanding low, being have been leaning angular few weeks. appreciated!

the angular directive supports watching when sortable options change:

scope.$watch(attrs.uisortable, function(newval, oldval){ 

so had @ jqueryui sortable documentation, , update correct property on plugin.

plunker: http://plnkr.co/edit/d6vavcw1bmwssxhk5qk7?p=preview

html

<ul ui-sortable="sortableoptions" ng-model="items">    <li ng-repeat="item in items">{{ item }}</li>  </ul> <button ng-click="sortableoptions.disabled = !sortableoptions.disabled">is disabled: {{sortableoptions.disabled}}</button> 

js

app.controller('mainctrl', function($scope) {   $scope.items = ["one", "two", "three"];    $scope.sortableoptions = {     disabled: true   }; });