angular, push object to parent array (modal)

Question

I have a modal controller, like so

angular.module('myApp').controller('ModalDemoCtrl', function ($scope, $modal, $log) {

  $scope.arrayList = [];

  $scope.newItem = function () {
    var modalInstance = $modal.open({
        templateUrl: 'newItem.html',
        controller: 'newItemCtrl',
        windowClass: 'app-modal-window',
        backdrop: 'static',
        resolve: {
        }
    });
    modalInstance.result.then(function (editable) {

        console.log($scope.arrayList);

    }, function () {
        $log.info('Modal dismissed at: ' + new Date());
    });
};

  $scope.newArrayItem = function () {
    var modalInstance = $modal.open({
        templateUrl: 'newArrayItem.html',
        controller: 'newArrayCtrl',
        windowClass: 'app-modal-window',
        backdrop: 'static',
        resolve: {
        }
    });
    modalInstance.result.then(function (editable) {

        $scope.arrayList.push(editable);

    }, function () {
        $log.info('Modal dismissed at: ' + new Date());
    });
};

When i first open a modal window it's to create a 'newItem', then inside that window I open another modal to create 'ArrayItems', when one arrayItem is created (when that modal is closed) I want to push that item to my $scope.arrayList, and repeat, when all arrayItems are created I also close the 'newItem' modal, and this is where I would like to reach my $scope.arrayList, but when I try to log it, it's empty.

So I guess I will need to push the objects to the parent scope, how do I do this?

Answer 1

I found a solution, don't know if it's optimal, but here it is.

I could not initiate the array where I did, I had to initiate in inside the controller of the first modal

angular.module('myApp').controller('newItemCtrl', function ($scope, $modalInstance) {

$scope.arrayList = [];

  $scope.editable = {
    arrayList: $scope.arrayList
  };

  $scope.ok = function () {
    $modalInstance.close($scope.editable);
  };

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

and as you can see I also had to include it in my editable object, in order to pass it when we close the modal.

Then when closing the second modal, where I create the arrayList item, I just push it as before $scope.arrayList.push($scope.editable);

And lastly, when I close the first modal I could log my arrayList console.log(editable);

Although this arrayList will be located inside another object (the editable of the first modal), it's good enough for now.