Tables-PopOvers Angularjs

Question

Tables-PopOvers Angularjs

This is my earlier question which is not answered..as I am still looking for help How to implement popover for table rows

I am trying show details of the selected table row on Popup, with my approach i could see data on Popover only for the first row of table.

Below is my code snaps, please help me to sort this

HTML Code :

<!DOCTYPE html>
<html  ng-app="AngFactory">
<head>
    <meta charset="ISO-8859-1">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link href="http://netdna.bootstrapcdn.com//twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">

    <script src="js/angular-resource.js"></script>
    <script src="js/jQuery.js"></script>
    <script src="modal/ConfigModal.js"></script>
    <script src="main.js"></script>
    <script src="services.js"></script>
    <script src="mainController.js"></script>
    <link href="css/myStyle.css" rel="stylesheet">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

    <!-- Latest compiled and minified JavaScript -->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

</head>
<body ng-controller="mainController">

    <table class="hoverTable">
        <thead >
            <tr>
                <th>PO Number</th>
                <th>Document Type</th>aq
                <th>Company Code</th>
            </tr>
        </thead>
        <tr  ng-repeat="X in resultSet " > 
            <td id="pop-over-link" ng-click="getPO_IT(X)">
                <a ><test-directive></test-directive>{{X.PONumber}}</a>
            </td>
            <td >
                {{X.DocType}}     
            </td>
            <td >
                {{X.CCode}}   
            </td>
        </tr>
    </table>
    aq

    <ul>
        <li ng-repeat="Y in results">
            <ul>
                <li ng-repeat=" Z in Y.NavItem.results">
                    <b>PO Number </b>: {{Z.PoNumber}}
                    <b>PO Item </b>: {{Z.PoItem}}
                    <b>Material</b> : {{Z.Material}}
                </li>
            </ul>
        </li>
    </ul>


</body>
</html>

JS Code :

app.directive('testDirective', function($compile) {
    return {
        restrict: 'EAC',
        templateUrl:'TemplateID.html',
        link: function(scope, elements, attrs) {
            $("#pop-over-link").popover({
                'placement': 'right',
                'trigger': 'click',
                'html': true,
                'container': 'body',
                'content': function() {
                    return $compile($("#pop-over-content").html())(scope);
                }
            });

            scope.testFunction = function() {
                alert("it works");
                console.log("maybe");
            }

        }
    }
});

TemplateID.html

<body>
               <div id='pop-over-content' style='display:none'>
                        <h3>Data goes here</h3>
                        {{X.PONumber}}
                        <ul>
                            <li ng-repeat="Y in results">
                                <ul>
                                    <li ng-repeat=" Z in Y.NavItem.results">
                                        <b>PO Number </b>: {{Z.PoNumber}}
                                        <b>PO Item </b>: {{Z.PoItem}}
                                        <b>Material</b> : {{Z.Material}}
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <button class='btn btn-primary' ng-click='testFunction()'>Close</button>
                    </div>
                </body>

javascript
angularjs