List objects doesn't show using ng-repeat - html

Question

I am not sure what i am doing wrong but my objects doesn't want to display in my partial view with angular's ng-repeat
SCRIPT
$scope.ExecutivePayList = [];
$scope.LoadExecutivesPay = function () {
$.get(loadExecutivesPayUrl, function (data) {
if (data.IsSuccess) {
//Load data
$scope.ExecutivePayList.length = 0;
//$scope.ExecutivePayList = angular.fromJson(data.Results);
for (var i = 0; i < data.Results.length; i++) {
$scope.ExecutivePayList.push(data.Results[i])
}
console.log($scope.ExecutivePayList);
}
});
};
HTML
<tr ng-repeat="executive in ExecutivePayList">
<td class="">
{{executive.NameOfIncumbent}}
</td>
<td class="">
{{executive.Position}}
</td>
<td class="">
{{executive.PatersonGrade}}
</td>
<td class="text-center">
{{executive.NumMonthsInPosition}}
</td>
<td class="text-center">
</td>
</tr>
JSON Output
{SectionID: "00000000-0000-0000-0000-000000000000", Results: Array(2), Message: null, IsSuccess: true, DetailedMessage: null}
Results: Array(2)
0:{SectionID: "b8e6466e-44b8-4a47-bdc6-a84e07200780", NameOfIncumbent: "Daily M", Position: "CEO", PatersonGrade: "", NumMonthsInPosition: 12}
1:{SectionID: "2290a579-7f86-437f-a806-36049eeb7c8b", NameOfIncumbent: "Field RH", Position: "CEO", PatersonGrade: "", NumMonthsInPosition: 12}
Not sure if this might be useful but i call my method on ng-init
<div ng-controller="ExecutivePayController" ng-init="LoadExecutivesPay()">

Answer 1

Firstly since you don't use angular's way to make the AJAX call you need to call angular.fromJson(data.Results). Furthermore since this is an asynchronous operation you have to manually trigger a digest cycle. So you have to call $scope.$apply() right after you update your $scope.ExecutivePayList.
Final code:
$scope.ExecutivePayList = [];
$scope.LoadExecutivesPay = function () {
$.get(loadExecutivesPayUrl, function (data) {
if (data.IsSuccess) {
//Load data
$scope.ExecutivePayList.length = 0;
$scope.ExecutivePayList = angular.fromJson(data.Results);
for (var i = 0; i < data.Results.length; i++) {
$scope.ExecutivePayList.push(data.Results[i])
}
console.log($scope.ExecutivePayList);
$scope.$apply(); // Here you trigger the digest cycle.
}
});
};
Update on how to do this in angular way.
It is recommended to have your http calls in a service instead of performing them in your controller as you do now. In any case you have to have the $http injected in your service or controller (current case).
Then your controller function should look like this:
$scope.LoadExectivesPayUrl = function() {
$http.get(loadExecutivesPayUrl).then((data) => {
if(data.IsSuccess) {
//Load data
$scope.ExecutivePayList.length = 0;
//No need to parse json because angular has done this automatically
//for you
for (var i = 0; i < data.Results.length; i++) {
$scope.ExecutivePayList.push(data.Results[i])
}
console.log($scope.ExecutivePayList);
// No need to $scope.$apply() , since digest cycle is performed
// within $http operation
}
})
}

Answer 2

First of all you are checking for if (data.IsSuccess) { and your output does not have it.
Secondly you are using the data.Results.length;. Also here Results is not there.