AngularJS write and then edit array

Question

I have a piece that when you click the Add button a modal appears and has 3 boxes you fill in details, this when saved shows a list on the main page with the title of your newly written item.

When you click the title it will open up another modal with the heading Edit and 2/3 of the input fields seem to be filled correctly and when you change values and click Save Changes it won't update.

I was hoping someone could assist me in my AngularJS in changing the values of the item in the array.

Thanks in advance.

Plunker code

Angular

var theApp = angular.module('theApp', []);
var app = angular.module('theApp', ['ui.bootstrap']);    

app.controller('MenuSideController', ['$scope','$modal','$log', function($scope, $modal, $log) {
    var ModalInstanceCtrl;

    $scope.locations = [];

    $scope.savenewmarker = function() {
        $scope.keys.push({ title: '', gps:'', desc:''});
    };

    $scope.createmarker = function () {
        var modalInstance = $modal.open({
            templateUrl: 'modal.html',
            controller: ModalInstanceCtrl,
            resolve: {},
            scope: $scope.$new()
        });
        modalInstance.result.then(function (selectedItem) {
            $scope.locations.push({title: selectedItem.titley, gps:selectedItem.gps, desc:selectedItem.desc});
        }, function () {
                console.log('Modal dismissed at: ' + new Date());
        });
    };

    $scope.editlocation = function (locations) {
        var locationToEdit = locations;
        console.log(locationToEdit);
        var modalInstance = $modal.open({
            templateUrl: 'edit.html',
            controller: ModalInstanceCtrl2,
            resolve: {
                locations: function () {
                    return $scope.locations;
                }
            },
            scope: $scope.$new()
        });
        modalInstance.result.then(function (selectedItem) {
            console.log('selectedItem: '+selectedItem.titley);

            $scope.locations[0].title = selectedItem.titley;
            $scope.locations[0].gps = selectedItem.gps;
            //$scope.locations.push({title: selectedItem.titley, gps:selectedItem.gps, desc:selectedItem.desc});
        }, function () {
                console.log('Modal dismissed at: ' + new Date());
        });
    };

    ModalInstanceCtrl = function ($scope, $modalInstance) {
        $scope.input = [];

        $scope.ok = function () {
            $modalInstance.close($scope.input);
            $scope.gps = "";
            $scope.title = "";
        };

        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };
    };

    ModalInstanceCtrl2 = function ($scope, $modalInstance, locations) {
        $scope.input = [];
        console.log(locations);
        $scope.ok = function () {
            $modalInstance.close($scope.locations);
            $scope.gps = "";
            $scope.title = "";
        };

        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };
    };


    $scope.plotmarkers = function() {
        console.log($scope);
    };
}]);



theApp.factory('CategoryService', ['$http', function($http){
    return {
        getList: function(){
            return $http.get('/directory/assets/inc/category.php');
        }
    };
}

]);

Answer 1

See updated plunk

$scope.editlocation = function (locations) {
        var locationToEdit = locations;
        console.log(locationToEdit);
        var modalInstance = $modal.open({
            templateUrl: 'edit.html',
            controller: ModalInstanceCtrl2,
            resolve: {
                locations: function () {
                    return locationToEdit;//Use locationToEdit instead.
                }
            },
            scope: $scope.$new()
        });

modalInstance.result.then(function (selectedItem) {

            //Update locationToEdit when user saves changes.
            locationToEdit.title = selectedItem.title; //Fix typo with titley
            locationToEdit.gps = selectedItem.gps;
            locationToEdit.desc = selectedItem.desc;

        }, function () {
                console.log('Modal dismissed at: ' + new Date());
        });

ModalInstanceCtrl2 = function ($scope, $modalInstance, locations) {
        $scope.input = angular.copy(locations);//create a copy of the editing location so that when the user cancels on the dialog, the object is not updated.
        console.log(locations);
        $scope.ok = function () {
            $modalInstance.close($scope.input);//pass the edited location as a result.
            $scope.gps = "";
            $scope.title = "";
        };

        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };
    };