How to wait until a variable is defined without using $scope $watch in angular?

Question

Below is my code so far:
My Module

module App.SomeModule {

    import ILabelSettingsViewModel = App.GeneralSettings.data.ILabelSettingsViewModel;
    import IGeneralSettingsService = App.GeneralSettingsService.IGeneralSettingsService;

    export enum LabelPageFormat {
        A4,
        Thermal
    }

    export interface IConsignmentDataService {
        getAccountLabelFormat(): LabelPageFormat;
    }

    export class MyDataService implements IMyDataService {
        accountLabelFormat: LabelPageFormat;
        static $inject: string[] = ["generalSettingsService"];
        constructor(private generalSettingsService: IGeneralSettingsService) {
            this.determineAccountLabelFormat();
        }
        getAccountLabelFormat(): LabelPageFormat {
            return this.accountLabelFormat;
        }
        private determineAccountLabelFormat() {
            var that = this;
            this.generalSettingsService.getLabelSettings().then((data: ILabelSettingsViewModel) => {
                switch (data.name) {
                    case LabelPageFormat[LabelPageFormat.Thermal]:
                        that.accountLabelFormat = LabelPageFormat.Thermal;
                        break;
                    default:
                        that.accountLabelFormat = LabelPageFormat.A4;
                        break;
                }
            }, () => {
                that.accountLabelFormat = LabelPageFormat.A4;
            });
        }
    }
    angular.module("app.common").service("myDataService", MyDataService);
}     

and my controller

module App.Consignment.List {
    "use strict";
    import IConsignmentDataService = Consignment.IConsignmentDataService;
    import ConsignmentListGridScope = Consignment.IConsignmentListGridScope;

    class ConsignmentListController implements IConsignmentBulkActionProvider {
        accountLabelFormat: LabelPageFormat;
        static $inject = ["$scope", "myDataService"];
        constructor(private $scope: ConsignmentListGridScope, private myDataService: IMyDataService) {
            this.accountLabelFormat = this.consignmentDataService.getAccountLabelFormat();
        }
    }
    angular.module("app.consignment").controller("consignmentListController", ConsignmentListController);
}

what I am trying to do is, get the accountLabelFormat from my data service and then use it to somewhere else. In data service, a method is used to get the format from database which is returned as a promise and then if success, I am setting the variable that will be returned when I call the getAccountLabelFormat() method from my controller. Now my problem is, as the service method is async, by the time I call the getAccountLabelFormat() method, the variable in accountLabelFormat service was not yet set, so that every time I got an undefined value in my controller. Any ideas about how can I solve this? Thanks in advance.

Answer 1

use $q.when. check out https://docs.angularjs.org/api/ng/service/$q

For example:

$q.when(this.accountLabelFormat)

so when you ask for that value it will return a promise then just chain it a then statement