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({
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.

You could try the bindToController option when creating the modal, so it shares the same scope as the parent controller