Angular UI Bootstrap Modal scope

I'm trying to improve my Angular skills by writing some basic applications that use a particular feature. The following application uses the UI Bootstrap modal to add users to a list, or remove them again.

Any feedback on any part of the code is very much appreciated, but I have some specific concerns around the way data is passed between the modal and the parent scope. It can be done by either setting scope=$scope in the $uibModal options, or by using resolve. Which is better in this scenario and why?

Here's an extract from the main controller:

$scope.open = function() {
  var modalInstance = $uibModal.open({
    templateUrl: 'add_user.html',
    controller: 'ModalController',
    scope: $scope
  });

  modalInstance.result.then(function(res){
    $scope.userGroup = res;
  });
};

and here's an extract from the modal controller:

$scope.modalUserGroup = angular.copy($scope.userGroup);

$scope.add = function(){
  $scope.modalUserGroup.push($scope.newUser);
};

$scope.delete = function(userIndex){
  $scope.modalUserGroup.splice(userIndex, 1);
};

$scope.save = function() {
  $uibModalInstance.close($scope.modalUserGroup);
};

Here's the plunk. I've also written up my notes on it encase it's useful to anyone else.