Angularjs WebApi is not working in Asp.net MVC Entity Framework - angularjs

Question

This error is Occur after running the web application. this is picture of inspect elements of google chrome.
See Image
See Second Image
i want to us entity framework
here is class code... when i comment the
public virtual List tblproduct { get; set; } and
public virtual List tblproduct { get; set; } this its working perfetcly how to completety use entity framework mvc in it
[Table("tblCatagory")]
public class AddCatagory
{
public int Id { get; set; }
[StringLength(56)]
public string CataName { get; set; }
public virtual List<Product> tblproduct { get; set; }
//public virtual List<AddSubCatagory> tblsubcatagory { get; set; }
}
[Table("tblSubCatagory")]
public class AddSubCatagory
{
public int Id { get; set; }
[StringLength(56)]
public string SubCataName { get; set; }
public int AddCatagoryId { get; set; }
public virtual AddCatagory tblcatagory { get; set; }
public virtual List<Product> tblproduct { get; set; }
}
product class code
[Table("tblProduct")]
public class Product
{
public int Id { get; set; }
[StringLength(56)]
public string ProductName { get; set; }
[StringLength(156)]
public string ProductDes { get; set; }
public int ProductQty { get; set; }
public double ProductRate { get; set; }
public double Inches { get; set; }
public DateTime Date { get; set; }
public int AddCatagoryId { get; set; }
public int AddSubCatagoryId { get; set; }
public virtual AddCatagory tblcatagory{ get; set; }
public virtual AddSubCatagory tblsubcatagory{ get; set; }
}
wepapi controller
public List<Product> Getproducts()
{
var result = db.products.ToList();
return result;
}
angularjs code..
GetAllPro();
function GetAllPro() {
$http.get("/api/Products").then(function (response) {
$scope.Pro = response.data;
}, function () {
alert("Error")
})
}