AngularJS : run function after scope has been loaded with data from DB

Question

So i am currently running into this problem

I have select options which value are retrieved from DB. I use ui-router, and in the controller i always set if(vm.action == 'blabla') then it will call a function then retrieve the data from the webservice.

The problem is, when I am calling more than 2 data(example products and tax select choices). How can i run a function after particular select options has been successfully retrieved from DB?

Take an example, i am doing quotation to invoice module. There are tax and products. These 2 retrieved from DB. in the ajax call after I retrieved the products succesfully, I directly run another function that will calculate all the prices and tax. But somehow, the tax has not been successfully loaded into vm.options.tax after all the products have been loaded successfully

I have tried using $scope.watch('vm.options.tax',function()) but it just gives me undefined in the first place and didn't update me once the vm.options.tax has been loaded with data from DB.

how can i 'wait' for the vm.options.tax has been loaded and then run the function?

Thank you

Answer 1

When you're using scope.watch, it will triggered once the dom first fully loaded and when the model value changed. When the dom is load, the process of retrieving data from db isn't finish, that's why you get undefined value. You can use angular promise. The semantics of Angular dictate that you use promises as a sort of 'callback handle' - do something asynchronous in a service, return a promise, and when the asynchronous work is done, the promise's then function is triggered.

var populateTax = function() {
    return $http.get('/api/get_all_tax')
           .then(
              function (response) {
                  // Calculate pricing here
                  var pricing = response.data * tax;
              },
              function (httpError) {
                 // translate the error
                 throw httpError.status + " : " + 
                       httpError.data;
              });
};