AngularJS $http.get in MVC5 Areas - angularjs

Question

I have an Area named Employer in MVC5 and in the root a folder named app that contains a folder named list. In list folder I created js files and as a service factory I user this code :
angSalaryApp.factory('listService', ["$http",
function ($http) {
return {
newList: newList
};
function newList() {
return $http.get("Areas/Employer/List/newlist");
}
return {
userLists: userLists
};
function userLists() {
return $http.get("Areas/Employer/List/getlists");
}
}
]);
but newlist and userlists actions aren't called and my controller variables are undefined. it's my controller code :
angSalaryApp.controller('listController',
function ListController($scope, listService) {
$scope.list = listService.newList;
$scope.userlist = [];
$scope.count = 0;
$scope.submitForm = function () {
};
$scope.loadLists = function () {
$scope.userlist = listService.userLists;
$scope.d = "ffdgdfg";
};
$scope.updateName = function (newtitle) {
$scope.list.Name = newtitle;
};
});

Answer 1

You need to restructure your factory like this:
angSalaryApp.factory('listService', ["$http",
function ($http) {
return {
newList: newList,
userLists: userLists
};
function newList() {
return $http.get("Areas/Employer/List/newlist");
}
function userLists() {
return $http.get("Areas/Employer/List/getlists");
}
}
]);
...otherwise userLists will be private.

Answer 2

Have you tried to move the route initialization to the Area registration?
using System.Web.Mvc;
namespace MyAreaTest
{
public class MyAreaRegistration : AreaRegistration
{
public override string AreaName
{
get { return "MyArea"; }
}
public override void RegisterArea(AreaRegistrationContext context)
{
context.MapRoute(
"Area_default",
"MyArea/{controller}/{action}/{id}",
new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
}
}