JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>

<br>
<ul ng-repeat="person in Persons | filter:search">
<li>{{person}}<button type="button" ng-click="removeItem(person)">REMOVE</button>
<button type="button" ng-click="editPersons(person)">UPDATE</button>
</li>

</ul>
<div ng-show="showEdit">
First Name: <input type="text" ng-model="firstName"><br>
    <button type="button" ng-click="Save(firstName")>SAVE</button>

</div>
<button type="button" ng-click="addItem(firstName)">ADD</button>
<br/>
    <label>SEARCH</label><input type="search" ng-model="search" />
</div>

JavaScript

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
	$scope.Persons = [];
    $scope.firstName = "";
    $scope.showEdit = false;
	
	
   $scope.addItem = function(item)
{
	$scope.Persons.push(item);
}
    $scope.removeItem = function(person)
	{
		 $scope.Persons.splice( $scope.Persons.indexOf(person), 1 );
	}
	$scope.editPersons = function (item) {  
     $scope.showEdit = true;
    }   
	$scope.Save = function (firstName)
    {
      $scope.Persons.splice(1,firstName)
    } 
 
});