Nested ajax callbacks to make sure that we load look up data in all dropdowns before loading the page data.

Nested-callback-hell

   //What is the alternative of getting rid of the nested callback hell ?
   
    //Load the data for the 3 dropdowns
    $http.get('Products/AllProducts/').success(function (data) {
        $scope.products = data;

        $http.get('Colors/AllColors/').success(function (colordata) {
            $scope.colors = colordata;

            $http.get('Products/AllSizes/').success(function (sizedata) {
                $scope.sizes = sizedata;

                    // If this is an edit view, Load the saved data from db
                    if ($("#OrderId").length) {
                        $http.get('Orders/details?orderId=' + $("#OrderId").val()).success(function (orderData) {
                            $scope.formulaOperands = $scope.doSomeProcessingWithIds(orderData);;
                        });
                    }
            });

        });

    });