Editing an existing contact in modal (bootstrap-ui angular)

Question

I have built a addressBook holder, which should allow a user:

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. 

Essentially a simple CRUD app, with all data stored by using localStorage. It looks like I need something like the solution here, but I am not hundred percent sure how I would do this.

I have implemented both the creation and deleting of an address, but am having difficulties implementing the editing of an address that already exists.

With the code I have below when I click the edit contact button, it opens the modal, but when I enter the details into the form it creates a new address as opposed to editing the one I clicked on.

This is happening as I am not distinguishing between the two. Any guidance on how to change the code to allow me edit an address would be brilliant. I have spent the last few hours trying to figure this out but am completely stuck. Please see the code below. (Apologies for the amount of code, but I think it is necessary to solve this)

Here is the javascript

Angular factory

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;
})

Angular controllers

first controller(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();

})

second controller(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>

Answer 1

You can pass the index of the edited item to the modal with testCtrl.modalInstance.idx = index:

app.controller('testCtrl', function ($routeParams, $uibModal, addressFactory) {
  this.open = function (index) {
    testCtrl.modalInstance = $uibModal.open({
      templateUrl: 'form-modal.html',
      controller: 'ModalCtrl',
      controllerAs:'ctrl',
    });
    testCtrl.modalInstance.idx = index;
  }
  ...

Here is a codepen that can edit and save items, based on if they have or don't have an index.