Returning REST Data To Another Function - angularjs

Question

So I am incorporating AngularJS into a SharePoint page that I am creating. I have a function that gathers information from a list in SharePoint via a REST function. What it is supposed to do is populate a table with the data it retrieves from the REST call. It does this fine, however, one of the fields is a 'Person or Group' field and rather than returning the name of the person, it returns their ID which is fine but it calls for me to perform another REST call on another list. I have successfully done so and filtered out the results based on the users ID. What I did was pass a user ID to a function that calls the REST function to the list that contains the users name and then wrote an if statement basically saying if the passed ID equals a given element ID, display the the users name. The problem I am having is while I have retrieved the correct data, I am not able to return the data and I believe the reason why is because I am trying to return data from a nested functions. I have a function and within that function an $http.success function. The data I am trying to retrieve resided in the $http.success function. Sorry if this question is hard to follow but hopefully taking a look at the below code will help to clear things up.
P.S. When I alert the code from the 'displayProjDetails' function I receive an undefined message, but when I alert it from the 'getUser' function it displays the data properly.
Thanks in advance for any assistance.
ANGULAR CODE:
// Function to display Project Details Data
$scope.displayProjDetails = function() {
$http({type: "GET", url:"http://mysiteurl/_api/web/lists/getbytitle('Project%20Details')/items?$top=5000", headers: { "ACCEPT": "application/json;odata=verbose"}})
.success(function(data) {
$scope.results = data.d.results;
$scope.details = [];
var full_funded;
for(i=0; i < data.d.results.length; i++) {
if(data.d.results[i].gibi == $scope.selectedProject.id) {
alert($scope.getUser(data.d.results[i].Project_x0020_POCId)); // CALL TO FUNCTION I AM WORKING ON (LOCATED AT THE BOTTOM OF THE PAGE)
if(data.d.results[i].Fully_x0020_Funded == true) {
full_funded = "Yes";
} else {
full_funded = "No"
}
$scope.details.push({id: data.d.results[i].gibi, poc: data.d.results[i].Project_x0020_POCId, code_poc: data.d.results[i].Code_x0020_312_x0020_POCId,
perc_complete: data.d.results[i].OData__x0025__x0020_Complete, funded: full_funded, pop_from: data.d.results[i].PoP_x0020_From,
pop_to: data.d.results[i].PoP_x0020_To});
}
};
});
}
// Function to retrieve the name of the Point of Contact (Currently working on this...)
$scope.getUser = function(value) {
$http({type: "GET", url: "http://mysiteurl/_api/web/siteusers?$top=5000", headers: { "ACCEPT": "application/json;odata=verbose"}})
.success(function(data) {
$scope.results = data.d.results;
$scope.user_attributes = [];
for(i=0; i < data.d.results.length; i++) {
if(data.d.results[i].Id == value) {
return data.d.results[i].Title;
}
};
});
}
HTML CODE
<div class="col-lg-9" id="project_details_table">
<h3>Project Details</h3>
<table class="table table-striped">
<thead>
<tr>
<th>Project ID</th>
<th>PoC</th>
<th>Code 2532 PoC</th>
<th>% Complete</th>
<th>Fully Funded</th>
<th>PoP From</th>
<th>PoP To</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="detail in details">
<td data-ng-bind="detail.id"></td>
<td data-ng-bind="detail.poc"></td> <!--TRYING TO REPLACE THIS WITH THE USER'S NAME INSTEAD OF THE USER'S ID-->
<td data-ng-bind="detail.code_poc"></td>
<td data-ng-bind="detail.perc_complete"></td>
<td data-ng-bind="detail.funded"></td>
<td data-ng-bind="detail.pop_from | date:'yyyy/MM/dd'"></td>
<td data-ng-bind="detail.pop_to | date:'yyyy/MM/dd'"></td>
</tr>
</tbody>
</table>
</div>
UPDATE:
Upon making the recommended changes to my code, my data is displayed as follows...
As you can see, what I am trying to do is replace the '[object Object]' with the proper name. Here it is just adding new rows to the table rather than placing the name in its correct location. Here is my updated code...
$scope.getUser = function(value) {
return $q(function(resolve, reject){
$http({type: "GET", url: "http:mysiteurl/_api/web/siteusers?$top=5000", headers: { "ACCEPT": "application/json;odata=verbose"}})
.success(function(data) {
$scope.results = data.d.results;
for(i=0; i < data.d.results.length; i++) {
if(data.d.results[i].Id == value) {
resolve(data.d.results[i].Title);
}
};
});
});
}
// Function to display Project Details Data
$scope.displayProjDetails = function() {
$http({type: "GET", url:"http:mysiteurl/_api/web/lists/getbytitle('Project%20Details')/items?$top=5000", headers: { "ACCEPT": "application/json;odata=verbose"}})
.success(function(data) {
$scope.results = data.d.results;
$scope.details = [];
$scope.name = [];
var full_funded;
for(i=0; i < data.d.results.length; i++) {
if(data.d.results[i].gibi == $scope.selectedProject.id) {
$scope.name = $scope.getUser(data.d.results[i].Project_x0020_POCId).then(function(user){$scope.details.push({poc: user});});
if(data.d.results[i].Fully_x0020_Funded == true) {
full_funded = "Yes";
} else {
full_funded = "No"
}
$scope.details.push({id: data.d.results[i].gibi, poc: $scope.name, code_poc: data.d.results[i].Code_x0020_312_x0020_POCId,
perc_complete: data.d.results[i].OData__x0025__x0020_Complete, funded: full_funded, pop_from: data.d.results[i].PoP_x0020_From,
pop_to: data.d.results[i].PoP_x0020_To});
}
};
});
}

Answer 1

The problem is that your are working with async calls, so you can't return data, because the alert don't wait for the promise response, so one way to solve the problem is to return the promise from getUser:
return $http ...
then in the alert :
alert($scope.getUser(data.d.results[i].Project_x0020_POCId).then(function(name){return name;}));

Answer 2

$scope.getUser = function(value) {
return $q(function(resolve, reject){
$http({type: "GET", url: "http://mysiteurl/_api/web/siteusers$top=5000",
headers: { "ACCEPT": "application/json;odata=verbose"}})
.success(function(data) {
$scope.results = data.d.results;
$scope.user_attributes = [];
for(i=0; i < data.d.results.length; i++) {
if(data.d.results[i].Id == value) {
resolve(data.d.results[i].Title);
}
};
});
}
$scope.getUser(data.d.results[i].Project_x0020_POCId)
.then(function(user){
alert(user)
});