How to make the controller wait for factory response in angularjs?

Question

I am trying to get the response from factory to controller. but when i am calling a function of factory from controller, then the controller not waiting for its response. and giving "undefined".

here it is my controller.js

app.controller('customerCommentsController',function($scope,$http,$stateParams,$sce,$timeout,Comments){     

var commentsdata = '';

Comments.init(1,5);

$scope.total_comments = Comments.total();
console.log($scope.total_comments); //undefined 

$scope.positive_comments = Comments.positive();
console.log($scope.positive_comments);  //undefined 

$scope.commentsdata = Comments.getcomments(1,30);       
console.log($scope.commentsdata);   //undefined     
});

here I am calling init() method which gets the response from ajax, which takes some time to execute , but before it could complete, the other 2 statement (total() and positive() method) execute below the init method. and that not gets initialize because of init method not completed. and that why I am getting undefined. and same problem is coming when I am calling getcomments method which doesn't wait for its response.

here it is my factory

app.factory("Comments",function($http,$timeout,$q){

var commentshtml = [];
var commentshtml1 = [];

return {
    init :  function(start,end) {  
    var request = $http({   
            method:"post",
            url:"/comments.php",
            data: {start:start,end:end},                
            headers: {'Content-Type' : 'application/x-www-form-urlencoded'}                     
        });     

    request.success(function(data){                 
            commentshtml = data;            
        });             
    },      
    total : function() {

                return commentshtml.total_comment;                    
    },
    positive : function(){

            return commentshtml.per_positive_comment;               
    },
    getcomments : function(start,end) { 

        var promise  = $http({  
            method:"post",
            url:"/comments.php",
            data: {start:start,end:end},                
            headers: {'Content-Type' : 'application/x-www-form-urlencoded'}                     
        });

        promise.success(function(data){                 
            commentshtml1 = data.comments;
            console.log(commentshtml1); //giving the object             
            return commentshtml1;   
        }); 

    }
};

Answer 1

Do this way:

In factory

   return {
    init :  function(start,end) {  
     return $http({     //return the promise 
            method:"post",
            url:"/comments.php",
            data: {start:start,end:end},                
            headers: {'Content-Type' : 'application/x-www-form-urlencoded'}                     
        });     
    }
  getcomments : function(start,end) { 
             return $http({   //return the promise
            method:"post",
            url:"/comments.php",
            data: {start:start,end:end},                
            headers: {'Content-Type' : 'application/x-www-form-urlencoded'}                     
        });

}

In Controller

Comments.init(1,5).then(function(){
 $scope.total_comments = Comments.total();
console.log($scope.total_comments);  

  $scope.positive_comments = Comments.positive();
console.log($scope.positive_comments);
 });
Comments.getcomments(1,30).then(function(data){
  $scope.commentsdata =data.comments;

})

Or the best way use resolve property in ng-route or ui-router