(1) I have encountered a problem while trying to add a new user to a list of items (userList). The issue arises when the list is 'selectable', meaning that when a user selects an item from the list, the textboxes in the HTML code get populated with values from the selected item. This allows for editing of individual properties of the item. Below the group of textboxes is the 'add new user' button. However, when the textboxes are already populated with values and a new user is added without clearing them first, duplicate users appear in the list. Even though this allows for editing, it seems that the new and old users are somehow linked, causing changes made to one to reflect on the other. I suspect that the issue lies in the creation of a new user based on the selected record of the old user.

(2) Deleting a user works well, but it only deletes the user from the bottom of the list. I am looking for a way to select any item in the list and delete that specific item. I tried using the following code snippet:

$scope.userList.splice($scope.userList.indexOf(currentUser), 1);

but it did not work as expected.

My JavaScript code:

<script type="text/javascript">
    function UserController($scope) {
        $scope.userList = [
           { Name: "John Doe1", Title: "xxxx", Company: "yyyy", Place: "zzzz" },
           { Name: "John Doe2", Title: "xxxx", Company: "yyyy", Place: "zzzz" },
           { Name: "John Doe3", Title: "xxxx", Company: "yyyy", Place: "zzzz" },
           { Name: "John Doe4", Title: "xxxx", Company: "yyyy", Place: "zzzz" }
        ];


        $scope.selectUser = function (user) {
            $scope.currentUser = user;
        }

        $scope.addNew = function (currentUser) {
            $scope.userList.push(currentUser);
            $scope.currentUser = {}; //clear out Employee object
        }

        $scope.removeItem = function (currentUser) {
           // $scope.userList.pop(currentUser);
            $scope.userList.splice($scope.userList.indexOf(currentUser), 1);
            $scope.currentUser = {}; //clear out Employee object
        }
    }
</script>

My HTML code:

<div class="row">
        <div style="margin-top: 40px"></div>
        <div data-ng-app="" data-ng-controller="UserController">
            <b>Employee List</b><br />
            <br />
            <ul>
                <li data-ng-repeat="user in userList">

                    <a data-ng-click="selectUser(user)">{{user.Name}} | {{user.Title}} | {{user.Company}} | {{user.Place}}. </a>

                </li>
            </ul>
            <hr>
            <div style="margin-top: 40px"></div>
            <b>Selected Employee</b><br />
            <br />
            <div style="border:dotted 1px grey; padding:20px 0 20px 0; width:40%;">
            <div class="row" style="margin-left: 30px">
                <div style="display: inline-block;">
                    Name: 
                </div>
                <div style="display: inline-block; margin-left: 35px;">
                    <input type="text" data-ng-model="currentUser.Name">
                </div>
            </div>
            <div style="margin-top: 20px"></div>
            <div class="row" style="margin-left: 30px">
                <div style="display: inline-block;">
                    Title: 
                </div>
                <div style="display: inline-block; margin-left: 45px;">
                    <input type="text" data-ng-model="currentUser.Title">
                </div>
            </div>
            <div style="margin-top: 20px"></div>
            <div class="row" style="margin-left: 30px">
                <div style="display: inline-block;">
                    Company: 
                </div>
                <div style="display: inline-block; margin-left: 10px;">
                    <input type="text" data-ng-model="currentUser.Company">
                </div>
            </div>
            <div style="margin-top: 20px"></div>
            <div class="row" style="margin-left: 30px">
                <div style="display: inline-block;">
                    Place:
                </div>
                <div style="display: inline-block; margin-left: 35px;">
                    <input type="text" data-ng-model="currentUser.Place">
                </div>
            </div>
            </div>
            <div>
                <div style="margin: 2% 0 0 8%; display:inline-block">
                    <button data-ng-click="addNew(currentUser)" class="btn btn-primary" type="button">Add New Employee</button>
                </div>
                <div style="margin: 2% 0 0 1%; display:inline-block">
                    <button data-ng-click="removeItem(currentUser)" class="btn btn-primary" type="button">Delete Employee</button>
                </div>
            </div>
            <hr>
            <div style="margin-top: 40px"></div>
            <b>Employee Details:</b><br />
            <br />
            {{currentUser.Name}} is a {{currentUser.Title}} at {{currentUser.Company}}. He currently lives in {{currentUser.Place}}. 
        </div>
    </div>

* EDIT * I resolved the delete user issue by updating the removeItem function as follows:

 $scope.removeItem = function (currentUser) {
                if ($scope.userList.indexOf(currentUser) >= 0) {
                    $scope.userList.splice($scope.userList.indexOf(currentUser), 1);
                    $scope.currentUser = {}; //clear out Employee object
                }
            }

Thanks to the suggestion, the add new user issue has also been successfully resolved.