Passing Data Between Controllers and UI-Bootstrap Modals

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="jquery@*" data-semver="2.1.3" src="//code.jquery.com/jquery-2.1.3.min.js"></script>
    <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="//code.angularjs.org/1.3.15/angular.js"></script>
    <script data-require="ui-bootstrap@*" data-semver="0.12.1" src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="Main as vm">
    <table class="table">
      <tr ng-repeat="p in vm.people">
        <td>{{ p }}</td>
        <td>
          <button type="button" class="btn btn-sm btn-primary" ng-click="vm.deleteModal(p)">Delete</button>
        </td>
      </tr>
    </table>
  </body>

</html>

// Code goes here

angular.module('app', ['ui.bootstrap'])
.controller('Main', MainCtrl);

MainCtrl.$inject = ['$modal'];
function MainCtrl($modal) {
  var vm = this;
  
  vm.deleteModal = deleteModal;
  vm.people = [
    'Fred',
    'Jim',
    'Bob'
  ];
  
  function deleteModal(person) {
    $modal.open({
      templateUrl: 'modal.html',
      controller: ['$modalInstance', 'people', 'person', DeleteModalCtrl],
      controllerAs: 'vm',
      resolve: {
        people: function () { return vm.people },
        person: function() { return person; }
      }
    });
  }
}

function DeleteModalCtrl($modalInstance, people, person) {
  var vm = this;
  
  vm.person = person;
  vm.deletePerson = deletePerson;
  
  function deletePerson() {
    people.splice(people.indexOf(person), 1);
    $modalInstance.close();
  }
}

/* Styles go here */

body{
  padding: 20px;
}

<div class="modal-header">
    <h3 class="modal-title">Delete {{ vm.person }}?</h3>
</div>
<div class="modal-body">
    Are you sure you want to delete {{ vm.person }}?
</div>
<div class="modal-footer">
    <button class="btn btn-danger" ng-click="vm.deletePerson()">Delete</button>
    <button class="btn" ng-click="$close()">Cancel</button>
</div>