How to show data in a pop-up from a json file

Hi, I have a json file running on a local server with two client tables and bonuses. The json file called clients with primary key id, I have it in a table. I am trying that when you click on the id of the clients table, it shows in a pop-up the data of that client but taking them from json bonuses.

I have something like that

    <table class="table table-striped results" id="table1">
            <thead>
                <tr id="trstyle">
                    <th>N° Bono</th>
                    <th>Cédula</th>
                    <th>Cliente</th>
                    <th>Valor</th>
                    <th>Saldo</th>
                    <th>Fecha creación</th>
                    <th>Fecha vencimiento</th>
                    <th>Usuario</th>
                    <th>Estado</th>
                    <th>Motivo</th>
                    <th>Canal</th>
                </tr>
                <tr class="warning no-result">
                    <td colspan="4"><i class="fa fa-warning"></i> No result</td>
                </tr>
            </thead>
            <tbody>
                <tr id="trstyle" ng-repeat="x in todos">
                    <td id="thbono"><a ng-click="cargar(x)" ng-href={{"#pop1"}} id="open">{{x.id}}</a></td>
                    <td>{{x.cedula}}</td>
                    <td>{{x.cliente}}</td>
                    <td>{{x.valor}}</td>
                    <td>{{x.saldo}}</td>
                    <td>{{x.fechaCreacion}}</td>
                    <td>{{x.fechaVence}}</td>
                    <td>{{x.usuario}}</td>
                    <td>{{x.estado}}</td>
                    <td>{{x.motivo}}</td>
                    <td>{{x.canal}}</td>
                </tr>
            </tbody>
        </table>
        <ul id="#links"></ul>
        <div id="pop1" class="pop-up" ng-controller="TodoCtrl2">
            <div class="popBox">
                <div class="popScroll">
                    <table class="table table-bordered results" id="table1">
                        <thead>
                            <tr id="trstyle"> 
                                <th>Fecha</th>
                                <th>Número</th>
                                <th>Cédula</th>
                                <th>Cliente</th>
                                <th>Valor</th>
                                <th>Documento</th>
                                <th>Canal</th>
                                <th>Mensaje</th>
                                <th>Usuario</th>
                            </tr>
                        </thead>
                        <tbody>         
                            <tr id="trstyleque" ng-repeat="y in bonos">
                                <td>{{y.creationdate}}</td>
                                <td>{{y.id}}</td>
                                <td>{{y.document}}</td>
                                <td>{{y.client}}</td>               
                                <td>{{y.valor}}</td>
                                <td>{{y.canal}}</td>
                                <td>{{y.canal}}</td>
                                <td>{{y.motivo}}</td>
                                <td>{{y.usuario}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

in the js I have something like that.

//Consulta un archivo json para llenar la tabla
var App = angular.module('App', []);

App.controller('TodoCtrl', function($scope, $http) {
 $http.get('http://localhost:3000/clientes/')
 .then(function(res){
  $scope.todos = res.data;                
});

});


//Consulta un archivo json para llenar el pop-up
App.controller('TodoCtrl2', function($scope, $http) {
 $scope.bonos=[];
 $http.get('http://localhost:3000/detalle_Bonos/')
 .then(function(res){
  $scope.bonos = res.data;                
});

$scope.cargar = function(bono){
  console.log(bono);
  $scope.bonos[0] = bono;
}
});

thank you very much