Q:

How to use parallel and sequential function call that depend on each other in AngularJs? 

service
(function () {
    'use strict';

    angular
        .module('app.user')
        .factory('myService', Service);

    Service.$inject = ['$http', 'API_ENDPOINT', '$q'];

    /* @ngInject */
    function Service($http, API_ENDPOINT, $q) {

        var getUserDetails = function (paramData) {
            return $q(function (resolve, reject) {
                $http.get(API_ENDPOINT.url + '/user/details', paramData).then(function (result) {
                    if (result.data.success) {
                        resolve(result.data);
                    } else {
                        reject(result.data.msg);
                    }
                });
            });
        };

        var getCountryDetails = function (paramData) {
            return $q(function (resolve, reject) {
                $http.get(API_ENDPOINT.url + '/country/details', paramData).then(function (result) {
                    if (result.data.success) {
                        resolve(result.data);
                    } else {
                        reject(result.data.msg);
                    }
                });
            });
        };

        return {
            getUserDetails: getUserDetails,
            getCountryDetails: getCountryDetails
        };
    }
})();

controller
(function () {
    'use strict';

angular
    .module('app.user')
    .controller('myService');

/* @ngInject */
function UserCtrl(userService,countryService) {
    var vm = this;

    vm.onCountryChange = function (id) {
        vm.states = vm.countries.filter(function (item) {
            return item.id === id;
        })[0].states;
    };

    function init() {

        var token = window.localStorage.getItem('TOKEN');
        vm.userData = jwt_decode(token);

        // gets all country and its states
        myService.getCountryDetails()
            .then(function(msg){
                vm.countries = msg.data;
            },function(errMsg){
                console.log(errMsg)
            });

        var paramData = {
            params : {
                id : vm.userData.id
            }
        };

       // gets user data 

        myService.getUserDetails(paramData)
            .then(function (msg) {
                vm.user = msg.data.map(function (obj) {
                    var rObj = {
                        name: obj.name,
                        email: obj.email,
                        country : obj.country.id,
                        state : obj.state.id
                    };
                    return rObj;
                })[0];
                // once user data is fetched it takes user country and then pass to filter function to get all its state
                vm.onCountryChange(vm.user.country.id)
            }, function (errMsg) {

            });
    }
    init();
}
})();

Here onCountryChange() seems to load earlier even before it gets the user country id, to optimise I can call two services in parallel to fetch data and once the request is completed and user object is set, onCountryChange(countryId) can be triggered to fetch all the states of the country to which user belongs.  
It is useful to make two parallel http request ? 
How to make sure when all the request is completed and only then I call second function? 

A:

Here you have two options(both will work):
Option1: build a promise chain which is calling getUserDetails in myService .getCountryDetails.then, then you don't have to change the logic of getUserDetails
Option2: use Promise.all which will turn your getCountryDetails and getUserDetails to parallel and this way you can call vm.onCountryChange(vm.user.country.id) at Promise.all(p1, p2).then instead of at myService.getUserDetails(paramData).then

