AngularJS получить идентификатор элемента нажал и использовать в контроллере

Я только начал изучать AngularJS, и я пытаюсь создать довольно простое веб-приложение. Сейчас у меня есть некоторые пользователи. Каждый пользователь отображается в отдельной таблице, и каждый пользователь имеет свои собственные данные, которые отображаются в таблице под ним.

$scope.userList = [{username: "Bob_t", detailsId: 1}, {username: "Mike_V", detailsId: 2}];
$scope.userDetails = [{Name: "Bob", Age: 20, id: "1"}, {Name: "Michael", Age: 18, id: "2"}];

Вы можете видеть, что каждый пользователь имеет ссылку на него соответствующие подробности (detailsId в userList соответствует id в userDetails).

В принципе, то, что я пытаюсь сделать, изначально имеет таблицу данных, скрытую для каждого пользователя. И когда кто-то нажимает кнопку "Развернуть" для определенного пользователя, откройте эту таблицу данных соответствующих пользователей и заполните ее данными этого пользователя. У меня возникли проблемы с получением информации с кнопкой clicked expand, а затем с помощью этого для запроса моей БД, чтобы получить правильные данные пользователя, чтобы отобразить в таблице под ним.

<div ng-repeat="user in userList | filter:searchBox">
                    <div class="uk-panel-box-secondary uk-overflow-container tableDiv uk-margin-large-bottom">
                    <table class="uk-table uk-table-hover uk-margin-top">
                        <thead>
                            <tr>
                                <th>Username</th>
                            </tr>
                        </thead>
                    </table>
                    <a class="uk-margin-bottom uk-margin-left" id="expandIcon" ng-click="isOpened=!isOpened; showOrHideDetails(isOpened, param)" ng-class="{'uk-icon-plus-square-o': !isOpened, 'uk-icon-minus-square-o': isOpened}"></a>  
                 </div>  
                 <div class="uk-panel-box-secondary uk-overflow-container uk-margin-top uk-margin-large-left uk-margin-bottom tableDiv">
                    <table class="uk-table uk-table-hover uk-margin-top">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Age</th>
                                <th></th>
                            </tr>
                        </thead>
                          <tr ng-repeat="details in userDetails" id={{user.id}}>
                            <td>{{details.Name}}</td>
                            <td>{{details.Age}}</td>
                            <td>
                                <a href="" class="uk-icon-hover uk-icon-pencil-square-o icons"></a>
                                <a href="" class="uk-icon-hover uk-icon-trash icons uk-text-danger" ng-click="delete($index)"></a>
                             </td>
                          </tr>
                    </table>  
                 </div>  
 </div> 

мой контроллер:

$http({
        method : "GET",
        url : "http://database:8081/userAccounts/"
    }).then(function mySucces(response) {
        $scope.userList = response.data;
    }, function myError(response) {
        // $scope.userList = response.statusText;
    });

    $scope.showOrHideDetails = function(isOpened, param) 

        if(isOpened){
        console.log($scope.id)
        $scope[id] = true;
        console.log($scope.id);
            $http({
                method : "GET",
                url : "http://database:8081/details?id=" + index
            }).then(function mySucces(response) {
                $scope.userDetails = response.data;
            }, function myError(response) {
                $scope.userDetails = response.statusText;
            });

        }
        else{
            $scope.showDetails = false;
        }
    }

Что действительно меня смущает, когда я получаю правильный объект userDetails после запроса БД, как мне заполнить соответствующую таблицу этой информацией?

Я знаю, что мне, вероятно, нужна модель, но это меня смущает, потому что количество пользователей неизвестно.