I understand that the traditional way to wait for remote data is to .then from promises but the Problem is I need to create a function that returns the value created by the .then
//inside controller
$scope.someFunction = function(id){
   var returnVal;
   $http.post(someURL,{_id:id}).then(
       function(r){
           //lets assume r.data = {id:123,name:'john doe'}
           returnVal = r.data.name;
       },function(r){
           console.error(r.statusText);
           returnVal = 'error getting name'
       }    
   );
   return returnVal;
};
The problem is it keeps returning a null result because it executes the return block even when .then was not called yet.
//the html is like this
<main component>
    <!--this main component will generate dynamic number of subs-->
    <!--lets assume Seller is the main and sub is all the products he sold -->
    <sub component sub-detail="the function that returns correct value">
        <!--I need to make $http request to get the product details for each product generated-->
    </sub component>
</main component>
<another main component>
    <!--generates another series of subs-->
</another main component>
so in short. I need a function() that returns data from an http request
 
    