Passing data between modal and controller

Question

How can I make data available in a controller? I have created a really simple Plunk that should show data on the $scope in a modal. I’ll then need to update the data, and only update $scope on clicking “ok”. Clicking “cancel” will discard the changes.

But before I get to that step, I need to make the scope available to the modal. Most of the examples use two controllers. Do I need another controller as in this example: Passing Data to Twitter Bootstrap Modal in Angular? In my controller I have the following:

$scope.open = function(){
  var modalInstance = $uibModal.open({
    templateUrl: 'modal.html',
    controller: 'ModalInstanceController',
    resolve: {
      users: function() {
        return $scope.users;
      }
    }
  });
};

How can I display the users in the template? The plunk is here: http://plnkr.co/edit/FuXjSwtljQtFYOtFRV18?p=preview

Answer 1

To be able to access scope of the controller you need to pass scope object to the modal when creating an instance of it:

  $scope.open = function() {
    var modalinstance = $uibModal.open({
      scope: $scope,
      templateUrl: 'modal.html',
      resolve: {
        users: function() {
          return $scope.users;
        }
      }
    })
  };

This way Angular will create child scope of the controller $scope so you will be able to access items inside of modals scope:

Demo: http://plnkr.co/edit/0m9oktX2JHFmeiaDfOpO?p=preview