WebAPI2 / Angular job Interview skill assessment [SHARE] - NULL values

Question

A few months back, there was a job position who required a pre interview task assessment. I'm actually new to .NET, so I passed and decided to apply to another job which didn't require .net as much. Long story short. Since then, the idea of solving this problem hunts me and It bothers me that I was able to get really close to the solution and didn't actually finished it.

So, if anybody wants to practice their .net /webapi2/ angular skills here it is: screenshot

I get a weird error (NULL values) when I'm almost finishing this task

My Homecontroller.cs

namespace KLab.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Title = "Home Page";

            return View();
        }
        public JsonResult GetSections()
        {
            var db = new KLabDBEntities();
            var samples = db.Samples.Include("User").Include("Status").ToList();
            return Json(samples, JsonRequestBehavior.AllowGet);
        }
    }
}

Since this is WEb API I've changed the angular code to the following: my App.js

var myApp = angular.module('myApp', []);
myApp.controller('maincontroller', function ($scope, SampleService) {

getSamples();

function getSamples() {
    SampleService.getSamples()
        .success(function (Samples) {
            $scope.Samples = Samples;
        });    
}
});

my service.js

myApp.factory('SampleService', ['$http', function ($http) {

var urlBase = 'http://localhost:35656/api';
var SampleService = {};
SampleService.getSamples = function () {
    return $http.get(urlBase + '/Samples');
};

return SampleService;

}]);

My index.cshtml

<h2>Samples</h2>

<div ng-controller="maincontroller">
<table class="table">
<tr>
    <th>Samples Id </th>
    <th>Code Number</th>
    <th>Date </th>
    <th>User Id </th>
    <th>Status Id </th>
</tr>
<tr ng-repeat="Sample in Samples">
    <td>{{Sample.SampleId}} </td>
    <td>{{Sample.CodeNumber}} </td>
    <td>{{Sample.Date.replace('/Date(','').replace(')/','') | date:"MM/dd/yyyy"}} </td>
    <td>{{Sample.UserId}}</td>
    <td>{{Sample.StatusId}}</td>
</tr>
</table>
</div>

Everything else is default from the WeBAPI2 template from Visual Studio. so my Models are generated by Entity Framework:

When I build i get:

Samples Id  CodeNumber  Date    UserId  StatusId

data           data     data      1         6 

data           data     data      2         4 

My goal is to change those id numbers to the actual data of the tables , they are foreign key values

I get no values in that column and when I call the JSON I get:

[{"SampleId":1,"CodeNumber":129076,"Date":"2015-01-02T00:00:00","UserId":6,"StatusId":3,"Status":null,"User":null},
{"SampleId":2,"CodeNumber":850314,"Date":"2015-06-15T00:00:00","UserId":7,"StatusId":3,"Status":null,"User":null},
{"SampleId":3,"CodeNumber":176033,"Date":"2015-07-31T00:00:00","UserId":7,"StatusId":0,"Status":null,"User":null},
{"SampleId":4,"CodeNumber":129629,"Date":"2015-01-21T00:00:00","UserId":3,"StatusId":0,"Status":null,"User":null},"

which is odd since , Status and user are null

Somebody has suggested that this "joins" must be done within a view on the Database itself and then should be called with angular. like a SQL view or using LINQ. Unfortunately, I do not know LINQ but I do know SQL I guess I can create a view with all the tables. Therefore the question is. How can i replace those ID values to the actual data that are related to those foreign keys (userid, statusid) ?

Here's the bulk data's screenshot:

bulk data