Angular MVC ajax calls 404 not found - angularjs

Question

I'm new to angular and trying to make a call to perform crud operations from angular to a newly created mvc webapi controller... cannot get around the 404 not found on the get right now. Looking for some guidance from the pros, thanks!
Angular:
angular.module('PersonApp').service('PersonService', ['$http', function` ($http) {
var PersonService = {};
var urlBase = '/api/PersonApi/';
PersonService.getPersons = function () {
console.log(urlBase);
return $http.get(urlBase);
};
PersonService.upsertPerson = function (person) {
return $http.post(urlBase, person); //must have ,person !!!!!!!!!!
};
PersonService.removePerson = function (id) {
return $http.delete(urlBase + id);
};
return PersonService;
}]);
PersonApi.cs api:
public class PersonApi : ApiController
{
TutorialDataEntities ef_Db = new TutorialDataEntities();
Repository.Repository PersonRepository = new Repository.Repository();
[Route("api/PersonApi/{person}")]
[HttpPost]
public HttpResponseMessage UpsertPerson([FromBody]DTOPerson person)
{
if (ModelState.IsValid) // and if you have any other checks
{
var result = PersonRepository.UpsertPerson(person);
formatDate(result.birthDate);
return Request.CreateResponse(HttpStatusCode.Created, result);
}
return Request.CreateResponse(HttpStatusCode.BadRequest);
}
[Route("api/PersonApi/{id}")]
[HttpDelete]
public HttpResponseMessage RemovePerson([FromUri]int id)
{
PersonRepository.RemovePerson(id);
return Request.CreateResponse(HttpStatusCode.OK);
}
[Route("api/PersonApi/")]
[HttpGet]
public HttpResponseMessage GetPersons()
{
var result = PersonRepository.GetAllPersons();
foreach (var person in result)
{
formatDate(person.birthDate);
}
if (result == null)
return Request.CreateResponse(HttpStatusCode.NotFound);
return Request.CreateResponse(HttpStatusCode.OK, result);
}
private DateTime formatDate(DateTime date)
{
return Convert.ToDateTime(date.ToString("MM/dd/yyyy"));
}
}
My solution explorer:
WebApiConfig.cs
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
Routeconfig.cs
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}