How to display / hide, individually, div replicated in AngularJS, using jQuery?

[SIMULATION using JSFiddle at the end of the problem description]

The following function performs the insertion of some elements using AngularJS:

$scope.addItem = function (user){
    $scope.items.push({
    nome: $("input[name='nome']").val(),
    email: $("input[name='email']").val(),
    soma: sum++
  });
  user.nome = '';
  user.email = '';  
};

Foreachiteminsertedthereisatableofattributesthatmustbefilledin.

However,whenyouselectastateinthistable,thestateoftheothertableischangedequally.

Howtoindividuallymanipulate/controleachactionfromtheAttributestable(displayedviaModal)usingjavaScript?

Scriptthatdisplays/hidesfieldsaccordingtostatus:

$(document).ready(function(e){$('#estado').on('change',function(){if($(this).val()=="GO"){
            $('#insc-go').show();
            $('#insc-to').hide();
        }
        if($(this).val() == "TO"){
            $('#insc-to').show();
            $('#insc-go').hide();
        }
        if($(this).val() == ""){
            $('#insc-to').hide();
            $('#insc-go').hide();
        }
    });
})

  

Simulation: link