JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <head>
        <title>Crud Java Jersey pour AngularJS</title>
    </head>
  
<body ng-app="MonApp" ng-controller="Controleur1">
             
<!-- LISTE DES ELEVES -->
        <div class="datagrid">
             <table>
                <thead><tr><th>id</th><th>Prénom</th><th>Nom</th><th>Gérer</th></tr></thead>
                <tfoot><tr><td colspan="4"><div id="paging"><ul><li><a href="#"><span>Avant</span></a></li><li><a href="#" class="active"><span>1</span></a></li><li><a href="#"><span>2</span></a></li><li><a href="#"><span>3</span></a></li><li><a href="#"><span>4</span></a></li><li><a href="#"><span>5</span></a></li><li><a href="#"><span>Après</span></a></li></ul></div></tr></tfoot>
                 
                <tbody>
                    <tr ng-repeat="eleve in eleves">
                        <td>{{eleve.id}}</td>
                        <td>{{eleve.prenom}}</td>
                        <td>{{eleve.nom}}</td>
                        <td>  
                        <button ng-click="editer(eleve)">Modifier</button> 
                        <button ng-click="supprimer(eleve)">Supprimer</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div><br><br>
         
         
<!-- MODIFIER UN ELEVE        -->
        <div class="datagrid">
            <table>
            <thead><tr><th>Modifier</th><tr></thead>
            <tfoot><tr><td colspan="4"><div id="paging" style="text-align:right"><button ng-click="validerEdition()">Modifier</button></button></div></tr></tfoot>
                <tbody>
                    <tr><td><label>Id</label><br><input ng-model="eleve.id" disabled></input><br>
                    <label>Prénom</label><br><input ng-model="eleve.prenom"></input><br>
                   ...

JavaScript

angular.module('MonApp', [])
 
.controller('Controleur1', function($scope,$http) {
 
	    function ajouter(){
    	 alert('ajouté');
        $http.post('rest/eleves/ajouterEleve/',$scope.nouvelEleve).then(function(data){
            alert('ajouté');
            rafraichirLeTableau();
        })
        }
	
	    function rafraichirLeTableau(){
            $http.get('rest/eleves/totalEleves').then(function(data){
                $scope.eleves = data.data;
 
            })
        };
 
        $scope.editer = function(eleve){
            $http.get('rest/eleves/getEleveParId/'+eleve.id).then(function(data){
                $scope.eleve = data.data;
            })
         }
 
        $scope.validerEdition = function(){
            $http.post('rest/eleves/validerEdition/',$scope.eleve).then(function(data){
                alert('modifié');
                rafraichirLeTableau();
            })
         }
 
//        $scope.ajouter = 
       
 
         $scope.supprimer = function(eleve){
            $http.get('rest/eleves/supprimerEleveParId/'+eleve.id).then(function(data){
                alert('supprimé');
                rafraichirLeTableau();
            })
         }
 
         rafraichirLeTableau();
/* FIN DU CONTROLEUR */
});