在模态(bootstrap ui angular）中编辑现有联系人

我已经建立了一个addressBook持有者，它应该允许用户：

1. create an address, by entering details in modal pop up; 
2.delete an address and 
3.edit an address that already exists by entering details in modal pop up. 

本质上是一个简单的CRUD应用程序，所有数据都使用localStorage存储。看起来我需要类似于这里的解决方案，但我不能百分之百确定我会怎么做。

我已经实现了地址的创建和删除，但在实现现有地址的编辑时遇到了困难。

使用下面的代码，当我单击编辑联系人按钮时，它会打开模式，但当我将详细信息输入表单时，它将创建一个新地址，而不是编辑我单击的地址。

这是因为我没有区分两者。任何关于如何更改代码以允许我编辑地址的指导都将是非常棒的。我花了几个小时试图弄清楚这一点，但完全被卡住了。请参阅下面的代码。（为代码量道歉，但我认为有必要解决这个问题）

这是javascript

角度工厂

app.factory('addressFactory', function(){
    var addressFactory = {};
    addressFactory.addressBook = [];
    addressFactory.countries = [
        {name: "United Kingdom"},
        {name: "United States of America"}
    ];
    addressFactory.saveAddress = function(name, country){
        addressFactory.addressBook.push({
            name: name, 
            country: country
        });
        localStorage.setItem('addressBook', JSON.stringify(addressFactory.addressBook));
    };
    addressFactory.deleteAddress = function(index) {
        addressFactory.addressBook.splice(index, 1); 
        localStorage.setItem('addressBook', JSON.stringify(addressFactory.addressBook)); 
    }
    return addressFactory;
})

角度控制器

第一个控制器（testCtrl）

app.controller('testCtrl', function ($routeParams, $uibModal, addressFactory) {
var testCtrl = this;
this.addressBook = addressFactory.addressBook;
this.init = function() {
    addressFactory.init();
    this.addressBook = addressFactory.addressBook;
}
this.deleteAddress = function(index){
    addressFactory.deleteAddress(index);
};
this.open = function () {
    testCtrl.modalInstance = $uibModal.open({
      templateUrl: 'app/views/partials/form.html',
      controller: 'ModalCtrl',
      controllerAs:'ctrl',
    });
}
this.init();
})

第二个控制器（ModalCtrl）

.controller('ModalCtrl', function ($uibModalInstance,addressFactory) {
    this.addressBook = addressFactory.addressBook;
    this.countries = addressFactory.countries;
    this.saveAddress = function( name, country) {
        addressFactory.saveAddress( name,country);
        $uibModalInstance.dismiss('cancel');
    }
    this.cancelAddress = function () {
        $uibModalInstance.dismiss('cancel');
    };
})

index.html

  <!-- used to open a modal to create a new address -->
  <a ng-click="ctrl.open()">Enter new address</a>

   <div ng-repeat="contact in ctrl.addressBook track by $index"> 
        <p class="contactName">{{contact.name}}</p>
        <p class="contactCountry">{{contact.country}}</p>
        <!-- used open a modal to edit a new address -->
        <button ng-click="ctrl.open()">Edit Contact</button>
        <button ng-click="ctrl.deleteAddress($index)">Delete Contact</button>
   </div>

form.html

<form>
    <input ng-model="ctrl.name" type="text">
    <select ng-model="ctrl.country" ng-options="country.name for country in ctrl.countries">
        <option value="">--Choose a country--</option>
    </select>
        <button ng-click="ctrl.cancelAddress()">Cancel</button>
        <button ng-click="ctrl.saveAddress(ctrl.name, ctrl.country.name)">Save</button>
</form>