Asynchronous handling of services who provide data and retrieve it via http when necessary

Question

I have an angularJS app that utilizes two services to retrieve data from a DB.

session.js

angular.module('RiskAssessment').service('session', ['dbInterface', function(dbInterface) {
this.getBatches = function () {
    if (!this.batches) {
        console.log("Retrieved Batches");
        var that = this;
        return this.pullBatches().then(function (data) {
            that.batches = data; //Is this EVEN possible?
        });
    } else {
        console.log("Didn't retrieve Batches");
    }
    return this.batches;
};
this.pullBatches = function () {
    return dbInterface.pullBatches(this.getUserId());
};}]);

dbInterface.js

        pullBatches: function(userId){
            return $http.post('db_queries/get_batches.php', userId)
                .then(function (response) {
                    console.log("get_batches.php POST Result: ", response.data);
                    return response.data;
                })
                .catch(function (response) {
                    console.log("Error post");
                });
        }

I want to able to get this.batches via getBatches() if it has already been retrieved and set. Otherwise, I'd like to use pullBatches() to retrieve and set this.batches. The answer is probably some mix of promises, but I am struggling with this.

Thank you for reading!

EDIT ::

How do I set this.batches within a .then() of my call to .pullBatches()?

this.getBatches = function(){
    if(!this.batches) {
        console.log("Retrieved Batches");
        var deferred = $q.defer();
        deferred = this.pullBatches().then(function(data){
            //this.batches = data;  <---------------------------- HERE
        });
        return deferred.promise;
    }else{
        console.log("Didn't retrieve Batches");
    }
    return this.batches;
};

EDIT 2 :: With great help from @Jahirul_Islam_Bhuiyan I fixed my issue.

this.getBatches = function(){
    var deferred = $q.defer();
    if(!this.batches){
        console.log("Retrieved Batches");
        dbInterface.pullBatches(this.getUserId()).then(function(payload){
            deferred.resolve(payload.data);
            service.setBatches(payload.data);
        });
    }else{
        console.log("Didn't retrieve Batches");
        deferred.resolve(this.batches);
    }
    return deferred.promise;
};

this.setBatches = function(batches){
    this.batches = batches;
};

In Controller...

        session.getBatches().then(function(data){
            //console.log("getBatches.then() : " + JSON.stringify(data));
            $scope.batches = data;
        });

I now have a much greater understanding of promises!

Answer 1

Try following

this.getBatches = function(){
   var deferred = $q.defer();
    if(!this.batches) {
        console.log("Retrieved Batches");

        this.pullBatches().then(function(data){
           deferred.resolve(data);
        });
    }else{
        console.log("Didn't retrieve Batches");
        deferred.resolve(this.batches);
    }
   var promises = [
            deferred.promise
        ];
    var promise = $q.all(promises);
        return promise;
};

hope this help