sql server data bind table then selected row data get?

Question

Hi,

How to sql server bind the data in table after table selected row data get in angularjs

I am trying this concept below my code:

HTML Code:

<div ng-app="myApp" ng-controller="myCntrl">

<center>

<table>

<tr>

<%--<td>

<div class="col col-lg-8">

<span>Start Date

<input class="form-control" type="date" min="" id="StDate" ng-model="fromdate" required /></span>

</div>

</td>

<td>

<div class="col col-lg-8">

<span>End Date

<input class="form-control" type="date" min="" id="toDate" ng-model="todate" required /></span>

</div>

</td>--%>

<td>

<span>Start Date :

<input type="text" id="txtfromdate" ng-model="fromdate" />

<%-- <span style="color:red" ng-show="formpay.txtfromdate.$error.required">

Please Enter the StartDate</span>--%>

</td>

<td>

<span>To Date :

<input type="text" id="txttodate" ng-model="todate" />

</td>

<td>

<input type="button" id="btnFillProducts" value="Fill Products" ng-click="fillProductList()" />

</td>

</tr>

</table>

<br />

<table class="grid" id="gnpayment" runat="server" >

<thead>

<tr>

<th></th>

<th>

S.No.

</th>

<th>

Stud id

</th>

<th>

Student Nname

</th>

<th>

Trackid

</th>

<th>

Crbillno

</th>

<th>

Txnid

</th>

<th class="auto-style5">

Date

</th>

<th class="auto-style2">

Bank_txn

</th>

<th class="auto-style6">

Withoutcharges

</th>

<th class="auto-style1">

Withcharges

</th>

<th class="auto-style2">

Paymentmode

</th>

<th class="auto-style4">

Result

</th>

<th>

TransactionType

</th>

</tr>

</thead>

<tbody>

<tr ng-repeat="product in ProductList" ng-class="{'selected':Product.Stud_id == selectedRow}" ng-click="setClickedRow(Product.Stud_id)">

<td>

<button type="button" data-toggle="modal" data-target="#myModal" ng-click="GetCoursedetails()">Open Modal</button>

</td>

<td>

{{$index +1}}

</td>

<td >

{{product.Stud_id}}

</td>

<td>

{{product.stud_name}}

</td>

<td>

{{product.Trackid}}

</td>

<td>

{{product.Crbillno}}

</td>

<td>

{{product.Txnid}}

</td>

<td >

{{product.Transactiondate}}

</td>

<td >

{{product.Banktxn}}

</td>

<td>

{{product.withoutcharges}}

</td>

<td>

{{product.withcharges}}

</td>

<td>

{{product.Paymentmode}}

</td>

<td>

{{product.Result}}

</td>

<td>

{{product.TransactionType}}

</td>

</tr>

</tbody>

<tr>

</tr>

</table>

</center>

<script src="Scripts/angular.js"></script>

<script src="Scripts/Payment.js"></script>

<h1>You selected: {{product.Crbillno}}</h1>

</div>

JavaScriptcode:

var app = angular.module("myApp", []);

app.controller("myCntrl", function ($scope, $http) {

$scope.ProductList;

$scope.selectedRow = null;

$scope.fillProductList = function () {

var httpreq = {

method: 'POST',

url: 'Payment_etails.aspx/GetProductList',

headers: {

'Content-Type': 'application/json; charset=utf-8',

'dataType': 'json'

},

data: { fromdate: $scope.fromdate, todate: $scope.todate }

}

$http(httpreq).success(function (response) {

$scope.ProductList = response.d;

$scope.ProductsItems = [{

Stud_id: response.d,

stud_name: response.d.stud_name

}];

$scope.setClickedRow = function (stud_name) {

$scope.ProductList = stud_name;

}

})

};

});

Result: