Simple Crud Json Array with AngularJs

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.angularjs.org/1.2.16/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="App">
  <div ng-controller="CrudCtrl">
    <table>
      <tr>
        <td>Name</td>
        <td>Country</td>
        <td><span ng-click="add()">Add New</span></td>
      </tr>
      <tr ng-repeat="profile in Profiles">
        <td>
          <input type="text" ng-model="profile.name" ng-show="profile.editable">
          <span ng-hide="profile.editable">{{ profile.name }}</span>
        </td>
        <td>
          <input type="text" ng-model="profile.country" ng-show="profile.editable">
          <span ng-hide="profile.editable">{{ profile.country }}</span>
        </td>
        <td>
          <span ng-click="edit($index)" ng-hide="profile.editable">Edit</span>
          <span ng-click="save($index)" ng-show="profile.editable">Save</span>
          <span ng-click="delete($index)"> | Delete</span>
        </td>
      </tr>
    </table>
  </div>
  </body>

</html>

angular.module('App', []).controller('CrudCtrl', ['$scope',
	function($scope) {
	  $scope.Profiles = [
	      {
	        name : "gede",
	        country : "indonesia",
	        editable : false
	      },
	      {
	        name : "made",
	        country : "thailand",
	        editable : false
	      }
	    ];
	 
	 $scope.entity = {}
	    
	 $scope.edit = function(index){
	   $scope.entity = $scope.Profiles[index];
	   $scope.entity.index = index;
	   $scope.entity.editable = true;
	 }
	    
	 $scope.delete = function(index){
	   $scope.Profiles.splice(index,1);
	 }
	    
	 $scope.save = function(index){
	   $scope.Profiles[index].editable = false;
	   
	 }
	    
	 $scope.add = function(){
	   $scope.Profiles.push({
	      name : "",
        country : "",
        editable : true
	   })
	 }
	}
]);

/* Styles go here */
body{
  margin:10px;
  font-size:14px;
  font-family:Arial;
}
table{
  border:1px solid #333;
  border-collapse:collapse;
  width:100%;
}
table tr td{
  border:1px solid #333;
  padding:10px;
}
table tr td span{
  cursor:pointer;
}

Simple Angular Crud Json Array - http://gedelumbung.com