How to remove disabled from a button in different tables using ng-repeat in Javascript?

Question

I’m having a question about the disabled. I have an array of pessoas I want to include in an array of empresa. I use data-ng-repeat to display pessoas in a table, where buttons are added to each row so that they are added in the array empresa. I disabled the functionality of adding a person to the company through disabled so that there is no duplicate record.

var a = angular.module("2",[]);
        a.controller("controller", function($scope){
            $scope.pessoas= [{nome:"Rodrigo", data:"18/01/1991", id:"1"},
                            {nome: "Ana", data:"12/04/1959", id:"2"},
                            {nome: "Teresa", data:"19/07/1984", id:"3"}];
            $scope.empresa=[];              
            $scope.adicionarContatos = function(pessoa){
                $scope.empresa.push(angular.copy(pessoa));

            };
            $scope.removerContato = function(z){
                $scope.empresa.pop(z);
            };          
        });
    <table>
        <tr>
            <th>Nome</th>
            <th>Data</th>
        </tr>
        <tr data-ng-repeat="z in pessoas">
            <td data-ng-bind="z.nome"></td>
            <td data-ng-bind="z.data"></td>
            <td> <button class="btn btn-sucess fa fa-shopping-cart" data-ng-click="adicionarContatos(z)" onclick="disabled=true"></button>
            </td>   
        </tr>   
    </table>

However, as a consequence, I can no longer rehabilitate the button even by deleting an object from the array empresa, which is also displayed in another table via ng-repeat.

<table>
        <tr>
            <th>Nome</th>
            <th>Data</th>
        </tr>
        <tr data-ng-repeat="z in empresa">
            <td data-ng-bind="z.nome"></td>
            <td data-ng-bind="z.data"></td>
            <td> <button class="btn btn-sucess fa fa-shopping-cart" data-ng-click="removerContato(z)" </button>
            </td>
        </tr>
    </table>

What I need to do to that, while removing the person from empresa, it automatically enables the person in pessoas? I have tried to assign id to each button, but only the first one is set and the document.getElementByID doesn’t work.

Answer 1

The example below adds and removes in a company and to facilitate this was created an extra field in people with the name of status to control the measure that is added and/or removed, example:

var a = angular.module("2", []);
a.controller("controller", function($scope) {
  $scope.pessoas = [{
      nome: "Rodrigo",
      data: "18/01/1991",
      id: "1",
      status: false
    },
    {
      nome: "Ana",
      data: "12/04/1959",
      id: "2",
      status: false
    },
    {
      nome: "Teresa",
      data: "19/07/1984",
      id: "3",
      status: false
    }
  ];
  $scope.empresa = [];
  $scope.adicionarContatos = function(pessoa) {  
    pessoa.status = true;
    $scope.empresa.push(angular.copy(pessoa));
    console.log($scope.empresa);
  };
  $scope.removerContato = function(pessoa) {
    pessoa.status = false;
    $scope.empresa.pop(pessoa);
    console.log($scope.empresa);
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<div ng-app="2" ng-controller="controller">
  <table>
    <tr>
      <th>Nome</th>
      <th>Data</th>
    </tr>
    <tr data-ng-repeat="z in pessoas">
      <td data-ng-bind="z.nome"></td>
      <td data-ng-bind="z.data"></td>
      <td>
        <button class="btn btn-sucess fa fa-shopping-cart" ng-click="adicionarContatos(z)" ng-disabled="z.status">Adicionar Empresa</button>
        <button class="btn btn-sucess fa fa-shopping-cart" ng-click="removerContato(z)" ng-disabled="!z.status">Remover Empresa</button>
      </td>
    </tr>
  </table>
</div>