angular Js with Code first approch using WEB API and SPA - angularjs

Question

WE are using SPA template,Code first Approach(Entity Framework),Web API for services and Angular.js for DataBind.We are able to connect with our database to perform the CRUD aperation.But the Problem is that data is not displaying in the Web Page.Below is the code snippet:
Markup Script:-
<table id="example" class="table table-bordered table-hover" style="border:1px solid lightgray">
<thead>
<tr>
<th>ProgramID</th>
<th>ProgramName</th>
<th>SiteID</th>
</tr>
</thead>
<tbody id="tableBody">
<tr data-ng-show="addMode">
<td></td>
<td><input type="text" data-ng-model="newStatusDTO.ProgramID" /></td>
<td><input type="text" data-ng-model="newStatusDTO.ProgramName" /></td>
<td><input type="text" data-ng-model="newStatusDTO.SiteID" /></td>
<td>
<p><a data-ng-click="add(newStatusDTO)" href="javascript:;">Save</a> | <a data-ng-click="toggleAdd()" href="javascript:;">Cancel</a></p>
</td>
</tr>
<tr data-ng-repeat="StatusD in sgvm.gridData">
<td data-ng-model="StatusD.ProgramName">{{StatusD.ProgramName}}</td>
<td>
<p data-ng-hide="StatusD.editMode">{{ StatusD.ProgramName }}</p>
<input data-ng-show="StatusD.editMode" type="text" data-ng-model="StatusD.ProgramName" />
</td>
<td>
<p data-ng-hide="StatusD.editMode">{{ StatusD.SiteID }}</p>
<input data-ng-show="StatusD.editMode" type="text" data-ng-model="StatusD.SiteID" />
</td>
<td>
<p data-ng-hide="StatusD.editMode"><a data-ng-click="toggleEdit(StatusD)" href="javascript:;">Edit</a> | <a data-ng-click="deleteStatusDTO(StatusD)" href="javascript:;">Delete</a></p>
<p data-ng-show="StatusD.editMode"><a data-ng-click="save(StatusD)" href="javascript:;">Save</a> | <a data-ng-click="toggleEdit(StatusD)" href="javascript:;">Cancel</a></p>
</td>
</tr>
</tbody>
</table>
Angular Code:
angular.module('PPCRApp', [
'PPCRSearchController'
]);
function PPCRSearchController($scope, $http) {
$scope.loading = true;
$scope.addMode = false;
//Used to display the data  
$http.get('/api/PPCRSearch/GetProgram').success(function(data) {
$scope.sgvm = data;
$scope.loading = false;
})
.error(function() {
$scope.error = "An Error has occured while loading posts!";
$scope.loading = false;
});
$scope.toggleEdit = function() {
this.StatusD.editMode = !this.StatusD.editMode;
};
$scope.toggleAdd = function() {
$scope.addMode = !$scope.addMode;
};
//Used to save a record after edit  
$scope.save = function() {
$scope.loading = true;
var abc = this.StatusD;
$http.put('/api/PPCRSearch/UpdateStatus/', abc).success(function(data) {
alert("Saved Successfully!!");
abc.editMode = false;
$scope.loading = false;
}).error(function(data) {
$scope.error = "An Error has occured while Saving Friend! " + data;
$scope.loading = false;
});
};
//Used to add a new record  
$scope.add = function() {
$scope.loading = true;
$http.post('/api/PPCRSearch/PostStatus/', this.newStatusDTO).success(function(data) {
alert("Added Successfully!!");
$scope.addMode = false;
$scope.sgvm.gridData.push(data);
$scope.loading = false;
}).error(function(data) {
$scope.error = "An Error has occured while Adding Friend! " + data;
$scope.loading = false;
});
};
//Used to edit a record  
$scope.deleteStatusDTO = function() {
debugger;
$scope.loading = true;
var prgid = this.StatusD.programID;
$http.delete('/api/PPCRSearch/DeleteProgram/' + prgid).success(function(data) {
debugger;
alert("Deleted Successfully!!");
$.each($scope.sgvm.gridData, function(i) {
if ($scope.sgvm.gridData[i].programID == prgid) {
$scope.sgvm.gridData.splice(i, 1);
return false;
}
});
$scope.loading = false;
}).error(function(err) {
debugger;
$scope.error = "An Error has occured while deleting Friend! " + err.val();
$scope.loading = false;
});
};
}
GetProgram Function:
public class PPCRSearchController: ApiController {
private DataContext db = new DataContext();
static readonly IPPCRRepository repository = new ProgramRepository();
[HttpGet]
public SearchGridViewModel GetProgram() {
var b = repository.GetProgram(1, 10);
return b;
}
}
ProgramRepository:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace SPAwithAngular.Models {
public class ProgramRepository: IPPCRRepository {
public SearchGridViewModel GetProgram(int page, int pagesize) {
using(DataContext dbcontext = new DataContext()) {
SearchGridViewModel ddl = new SearchGridViewModel();
var lstProgram = from r in dbcontext.Program select r;
var a = Converter.LProgramDTO(lstProgram.ToList());
ddl.gridData = (0 == page ? null : a.Skip((page - 1) * pagesize).Take(pagesize).ToList());
// calculated number of pages and ceil the value
ddl.NumberOfPages = ((int) Math.Ceiling((double) a.Count / pagesize));
return ddl;
}
}
}
}
SearchGridViewModel function:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace SPAwithAngular.Models {
public class SearchGridViewModel {
public List < ProgramDTO > gridData {
get;
set;
}
public int NumberOfPages {
get;
set;
}
}
}
ProgramDTO:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace SPAwithAngular.Models {
public class ProgramDTO {
public int ProgramID {
get;
set;
}
public string ProgramName {
get;
set;
}
public int SiteID {
get;
set;
}
}
}
The records are saved successfully in database.But while trying to fetch it is not displayed.