AngularJS/Bootstrap - Select row and open details in modal with button

I'm using AngularJS, Bootstrap, and data-toggle to open a modal. I want to click on a row in a table, get the index number and store it, and click a button to open a modal that displays more details for that row using the stored index.

My code right now can get the index of the clicked row and my button opens a modal, but they're not connected so that the button grabs the row index and shows those details in the modal. My modal shows all row data instead of the details for the one clicked row. How can I connect the clicked row to the button and how do I get my modal to show details for one app instead of all apps? Any help would be much appreciated!

Here is my JS Fiddle.

Here is the code snippet for the click functions:

$scope.selectedRow = null;

$scope.clickRow = function(index) {
    $scope.selectedRow = index;
    console.log(index);
};

$scope.getDetails = function(index) {
    $scope.selectedRow = index;
    console.log(index);
};

And here is the code for my table and modal that call the click functions:

<div id="tableDiv">
    <table id="myTable" class="table display">
        <thead>
            <tr>
                <th ng-repeat="(i, th) in head" value="{{th.id}}" class="{{th.class}}"><span>{{th.name}}</span></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="app in apps | filter:search" ng-click="clickRow($index)" ng-class="{selected: $index === selectedRow}">
                <td>{{app.appName}}</td>
                <td>{{app.dateCreated}}</td>
                <td>{{app.dateUpdated}}</td>
                <td>{{app.payload}}</td>
                <td>{{app.status.name}}</td>
                <td>{{app.errorCode.name}}</td>
                <td>{{app.errorDesc}}</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th ng-repeat="(i, th) in head" value="{{th.id}}"><span>{{th.name}}</span></th>
            </tr>
        </tfoot>
    </table>
</div>

<div id="details">
    <button class="btn btn-default" data-toggle="modal" data-target="#myModal" ng-click="getDetails($index)">Launch</button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Details</h4>
                </div>
                <div class="modal-body">
                    <table class="table display">
                        <thead>
                            <tr>
                                <th ng-repeat="(i, th) in details" value="{{th.id}}"
                                    class="{{th.class}}"><span>{{th.name}}</span></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="app in apps">
                                <td>{{app.appName}}</td>
                                <td>{{app.errorDesc}}</td>
                                <td>{{app.recordCount}}</td>
                                <td>{{app.recordFail}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>