InvalidOperationException when sending get request in browser tab despite working in ajax - angularjs

Question

I have an ajax request done with angular, its very basic, here is the code:
$http.get(url,data).success(function(data){
//Do Stuff with data
});
This works fine and the data is all good.
But when i inspect the request on the network tab in Chrome, and i right click on the request and click Open in new tab I get the following error:
<ExceptionMessage>
The 'ObjectContent`1' type failed to serialize the response body for content type 'application/xml; charset=utf-8'.
</ExceptionMessage>
<ExceptionType>System.InvalidOperationException</ExceptionType>
Here is the api controller code:
[AcceptVerbs("GET")]
public object SearchRetailers(long userId, string term)
{
List<Tuple<int,string>> res = userService.SearchRetailers(userId, term);
return res.Take(20).Select(x => new
{
label = x.Item2 + " - " + x.Item1,
value = x.Item1
});
}
The code works fine and does not throw any exceptions.
i think this might have something to do with the request headers, i just want it to work when opened in the browser regularly.
Its important to note I am using Umbraco so the apicontroller inherits UmbracoApiController class.
Also, i don't see any apiwebconfig file anywhere so i cant implement other solutions i found, and my global asax also looks significantly different than in other questions i encountered, here is how it looks:
<%# Application Inherits="Umbraco.Web.UmbracoApplication" Language="C#" %>
<script RunAt="server">
protected void Application_PostAuthorizeRequest()
{
if (IsWebApiRequest())
{
HttpContext.Current.SetSessionStateBehavior(SessionStateBehavior.Required);
}
}
private bool IsWebApiRequest()
{
return HttpContext.Current.Request.AppRelativeCurrentExecutionFilePath.Contains("/api/");
}
</script>