Angular UI Modal, avoid modal scope change reflects in parent scope - angularjs

Question

I am building an Angular app where I want to control which apps in app list I want to show on home page. There is a section called "Manage Apps" where I can manage visible apps..
http://plnkr.co/edit/RPFvv0ZUB2OSctIQM8pQ?p=preview
The plunkr above explains what I want to achieve..
I have passed list of apps in json from parent scope to modal instance. I want to make changes to one field there which is IsPublished.
Now the problem is, whenever I make changes in isPublished field in Modal, it immediately gets reflected in parent scope. You can see apps being filtered in parent scope behind overlay..
I want to avoid it. I want to reflect the changes to parent scope only when I hit save / ok button.
is there any way to do so?

Answer 1

You need a deep copy of a source use angular.copy.The changes directly reflected to main screen because you bind $scope.apps with $scope.items and hence both are refrencing to the same location.
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.apps = [
{
"FileSystemObjectType":0,
"Id":1,
"ContentTypeId":"0x01008178C725CC128447AD122168CA03E484",
"Title":"First App",
"AppUrl":{
"__metadata":{
"type":"SP.FieldUrlValue"
},
"Description":"http://www.google.com",
"Url":"http://www.google.com"
},
"AppIcon":{
"__metadata":{
"type":"SP.FieldUrlValue"
},
"Description":"https://unsplash.it/150/?random",
"Url":"https://unsplash.it/150/?random"
},
"CanDelete":false,
"IsPublished":false,
"Priority":null,
"ID":1,
"Modified":"2015-03-04T15:44:36Z",
"Created":"2015-02-26T05:24:00Z",
"AuthorId":9,
"EditorId":9,
"OData__UIVersionString":"1.0",
"Attachments":false,
"GUID":"5a3e620d-461c-4663-8837-36bfd2967dad"
},
{
"FileSystemObjectType":0,
"Id":2,
"ContentTypeId":"0x01008178C725CC128447AD122168CA03E484",
"Title":"App 2",
"AppUrl":{
"__metadata":{
"type":"SP.FieldUrlValue"
},
"Description":"http://microsoft.com",
"Url":"http://microsoft.com"
},
"AppIcon":{
"__metadata":{
"type":"SP.FieldUrlValue"
},
"Description":"https://unsplash.it/150/?random",
"Url":"https://unsplash.it/150/?random"
},
"CanDelete":true,
"IsPublished":false,
"Priority":null,
"ID":2,
"Modified":"2015-03-04T15:44:36Z",
"Created":"2015-02-26T05:25:11Z",
"AuthorId":9,
"EditorId":9,
"OData__UIVersionString":"1.0",
"Attachments":false,
"GUID":"e919eb66-0f2b-4ed4-aad9-3b64400bf09a"
},
{
"FileSystemObjectType":0,
"Id":3,
"ContentTypeId":"0x01008178C725CC128447AD122168CA03E484",
"Title":"App 3",
"AppUrl":{
"__metadata":{
"type":"SP.FieldUrlValue"
},
"Description":"http://google.com",
"Url":"http://google.com"
},
"AppIcon":{
"__metadata":{
"type":"SP.FieldUrlValue"
},
"Description":"https://unsplash.it/150/?random",
"Url":"https://unsplash.it/150/?random"
},
"CanDelete":true,
"IsPublished":true,
"Priority":0,
"ID":3,
"Modified":"2015-03-04T15:44:36Z",
"Created":"2015-02-26T08:06:23Z",
"AuthorId":9,
"EditorId":9,
"OData__UIVersionString":"1.0",
"Attachments":false,
"GUID":"07a63d11-fe94-4fc2-95fc-b7ddf16f160a"
},
{
"FileSystemObjectType":0,
"Id":4,
"ContentTypeId":"0x01008178C725CC128447AD122168CA03E484",
"Title":"Test1",
"AppUrl":{
"__metadata":{
"type":"SP.FieldUrlValue"
},
"Description":"http://www.attini.com",
"Url":"http://www.attini.com"
},
"AppIcon":{
"__metadata":{
"type":"SP.FieldUrlValue"
},
"Description":"https://unsplash.it/150/?random",
"Url":"https://unsplash.it/150/?random"
},
"CanDelete":true,
"IsPublished":true,
"Priority":1,
"ID":4,
"Modified":"2015-03-04T15:44:36Z",
"Created":"2015-02-27T03:58:37Z",
"AuthorId":9,
"EditorId":9,
"OData__UIVersionString":"1.0",
"Attachments":false,
"GUID":"9375eff9-4101-4c1f-ad85-bedc484b355f"
}
];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.apps;
}
}
});
modalInstance.result.then(function (items) {
$scope.apps = angular.copy(items);
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items = angular.copy(items);
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.items);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
Working Plunker