How to populate data on nav-tab in partial View in MVC? - asp.net-mvc

Question

I have partial View where I have 2 nav-tab. On Each tab, I want to populate data based on Country.
Currently, I am getting following error:
Insufficient stack to continue executing the program safely. This can
happen from having too many functions on the call stack or function on
the stack using too much stack space.
Controller
public ActionResult Index()
{
ClsHome model = new ClsHome();
return View(model);
}
public PartialViewResult EmployeeBasedCountry(int CountryId)
{
ClsHome clshome=new ClsHome();
clshome.Country = CountryId;
clshome.countries = CountryFilter(CountryId);
return PartialView("~/Views/Home/_pEmp.cshtml", clshome);
}
Index View
#model EmpWebsite.Models.Home.ClsHome
<div class="col-md-5">
#Html.Partial("_pEmp")
</div>
Partial View
#model EmpWebsite.Models.Home.ClsHome
<ul class="nav nav-tabs nav-justified">
<li class="active"><a data-toggle="tab" href="#Tab1">India</a></li>
<li><a data-toggle="tab" href="#Tab2" style="width:auto">USA</a></li>
</ul>
<div class="tab-content">
<div id="Tab1" class="tab-pane fade">
#Html.Action("EmployeeBasedCountry", new { #CountryId = "1" })
<div class="panel">
<table class="table-striped">
<tr class="heading">
<th>
EmpId
</th>
<th>
EmpName
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#item.EmpId
</td>
<td>
<a>#item.EmpName</a>
</td>
</tr>
}
</table>
</div>
</div>
<div id="Tab2" class="tab-pane fade">
#Html.Action("EmployeeBasedCountry", new { #CountryId = "2" })
<div class="panel">
<table class="table-striped">
<tr class="heading">
<th>
EmpId
</th>
<th>
EmpName
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#item.EmpId
</td>
<td>
<a>#item.EmpName</a>
</td>
</tr>
}
</table>
</div>
</div>
</div>