angularjs repeat does not show data at first time - asp.net

Question

First, I am so sorry because of my English.
I am showing a table that it's data come from server and shown with angular repeat.
I make a ng-click on each row of table that send an ajax request and get another list that I want to show in another table, until now all the thing are right,
but I have a little problem, my problem is that I must click twice on my first table's row to show second table data, at first time all the data comes from server but did not show in second table, my angular code is shown below.
angular.module("BI", [])
.controller("ListTables", function ($scope, $http) {
$scope.ReportLst = [];
$scope.myData = {};
$scope.myData.ReportLst = [];
$scope.myData.ReportDetail = [];
$scope.myData.ReportDetail2 = [];
$scope.selectedReportval = "";
$scope.Load = function () {
$http.post('MakeReport.aspx/LoadReportLst', { data: {} })
.success(function (data) {
$scope.myData.ReportLst = JSON.parse(data.d);
})
.error(function (data, status) {
alert('error');
});
}
$scope.SelectRepID = function (val) {
$.ajax({
type: "POST",
url: "MakeReport.aspx/GetReportDetail",
contentType: "application/json; charset=utf-8",
data: "{ 'val': '" + val + "'}",
dataType: "json",
success: function (data) {
$scope.myData.ReportDetail = JSON.parse(data.d);
},
error: function (data, status, jqXHR) {
alert(data.d);
}
});
$scope.selectedReportval = val;
}
});

Answer 1

In your second request you're using $.ajax instead of $http, because this isn't an Angular function a digest won't be triggered and your view won't be updated, in order to fix this you have to use $http there too.
$scope.SelectRepID = function (val) {
$http.post({
url: "MakeReport.aspx/GetReportDetail",
contentType: "application/json; charset=utf-8",
data: "{ 'val': '" + val + "'}",
dataType: "json"
}).then(
function(data) {
$scope.myData.ReportDetail = JSON.parse(data.d);
}, function(error) {
alert(error);
}
);
$scope.selectedReportval = val;
}
Update: Another way would be to use a $timeout in your $.ajax success function like so (this will trigger a digest).
success: function (data) {
$timeout(function() {
$scope.myData.ReportDetail = JSON.parse(data.d);
});
}