AngularUI Bootstrap Modal. Scope issue

Question

Im fairly new to AngularJS and I'm trying to create an List with "Draggables" that you can drop in 4 lists which are sortable. I got this to work with AngularUI-Sortable.

Now for the next part I'm trying to edit the content (more options and settings in the feature). With a modal from AngularUI-Bootstrap.

I got this to work with opening the content from the selected item I want to edit.

As you can see in the Plunker I almost got it working. Only thing I cant figure out is how I can get the {{ item }} to be {{ widgetOption }} AFTER I pressed the save button.

http://embed.plnkr.co/TTNccRuToObZuSmwYlTG/preview

Answer 1

My approach would be to keep a reference to the original object in your modal controller. So, assume the object passed in is the original, and it should only be modified if the form is saved. Making the fewest changes possible to your code to make it work, I came up with this plunker.

http://plnkr.co/edit/eSbEZZajsNfmVv3vmTdc?p=info

var modalInstance = $modal.open({
    templateUrl: 'modal.html',
    controller: ModalInstanceCtrl,
    resolve: {
        widgetOptionsLocal: function () {
            return widgetOptions;
        }
    }
});


var ModalInstanceCtrl = function ($scope, $modalInstance, widgetOptionsLocal) {
    var widgetOptionsOriginal = widgetOptionsLocal;
    $scope.widgetOptions = angular.copy(widgetOptionsLocal);

    $scope.ok = function () {
      widgetOptionsOriginal.content = $scope.widgetOptions.content;
       $modalInstance.close($scope.widgetOptions);
    };

    $scope.cancel = function () {
       $modalInstance.dismiss('cancel');
    };
};