How to dynamically disable ui-sortable directive in angular-ui

The angular directive supports watching when the sortable options change:

scope.$watch(attrs.uiSortable, function(newVal, oldVal){

So all you had to do was look at the jqueryui sortable documentation, and update the correct property on the plugin.

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
  };
});

You could use ui-if to toggle between a ui-sortable version and a non-sortable version, however this is a horrible design. However if you checked out the jQuery Sortable Docs it seems that there's an option for disabled. If the directive currently watches the options object for changes, you could simply toggle this option. If the options object is watched by reference and not by value, then perhaps you should open a pull-request with the tweak?

HTML

<div class="group-container" ui-sortable="vm.groupSortable" ng-model="group.groups">

JS

vm.groupSortable = {
    connectWith: ".group-container",
    disabled: true
};

vm.disableDragAndDrop = function(bVar)
{
    vm.groupSortable.disabled = bVar;
};

My first attempt at this would include a new directive with a link function that compiles a template fragment either including or not including ui-sortable based upon some value in the scope.

Code when I have time.