angularjs - Awaiting for services to return data or converting service into global dataset and passing it into angular controller? -

i have simple problem of needing wait on data return service calls before executing logic depends on data in question.

as confusing sounds have extract controller working on @ moment exhibiting problem.

// async services: $stateparams, gettags, getstrands, getlessons, getplan, updateplan, saveplan myapp.controller('editnewctrl', ['$scope', '$stateparams', 'gettags', 'getstrands', 'getlessons', 'getplan', 'updateplan', 'saveplan', function ($scope, $stateparams, gettags, getstrands, getlessons, getplan, updateplan, saveplan) {     // $stateparams correspondent 2 different routes controller     // #/~/     // #/~/:planid     // #/~/:planid/:year/:level     $scope.planid = $stateparams.planid; // defined when editing plan     $scope.year = $stateparams.year; // may or may not defined     $scope.level = $stateparams.level; // may or may not defined      ...      // calls retrieve stuff server     gettags.get({ groupid: 12, }, function (data) {         $scope.tags = data.tags; // go know when return     });      getstrands.get({ groupid: 12, }, function (data) {         $scope.strands = data.strands; // god knows when return     });      getlessons.get({ groupid: 12, }, function (data) {         $scope.lessons = data.lessons; // god know when return     });      // helpers     ...      // init select controls     if ($scope.planid != undefined && $scope.planid > 0) {         getplan.get({ planid: $scope.planid, groupid: 12, }, function (data) {             var plan = data.plan; // god know when return              plan.year = $scope.getyearbyid(plan.year); // convert int object             plan.level = $scope.getlevelbyid(plan.level); // convert in object              $scope.plan = plan;         });     } else {         $scope.plan = { name: '', strand: {}, year: {}, level: {}, tags: [], lessons: [], };     }      if ($scope.year != undefined) {         $scope.plan.year = $scope.getyearobj($scope.year);     }      if ($scope.level != undefined) {         $scope.plan.level = $scope.getlevelobj($scope.level);     } }]); 

more not run problem $scope.plan.year = $scope.getyearobj($scope.year); , $scope.plan.level = $scope.getlevelobj($scope.level); when enter edit mode. while understand service call happens asynchronously common ways of slowing down subsequent calls? or perhaps better encapsulate problem loginc in $scope.$watch?

i have concern $scope.tags , $scope.strands. possible have these datasets pre-fetched , managed (when managed mean refreshed every in background) on more global level , have them passed in references instead rather retrieving these in every controller come with. please advise if there angular structure or mechanism this.

in case clear me doing wrong here. please advice best course of action or should look.

complementary notes

just complement suggested solution dilemma.

because not using $http services instead use angularjs rest/factory services. example of such service so:

myapp.factory('gettags', ['$resource', function ($resource) {     return $resource('/api/service/gettaglist', {}, {         query: { method: 'get', params: {}, }, isarray: true,     }); }]); 

how use in controller shown above that's not enough. how 1 use service in situation when need access then:

.state('state', {     url: '/url:id',     templateurl: '/template.html',     resolve: {         tags: function (gettags) {             //todo: need make directive returns groupid             return gettags.get({ groupid: 12, }).$promise.then(                 function (data) {                     if (data.success) {                         return data.tags;                     } else {                         return [];                     }                 });         },     },     controller: 'editnewctrl', }) 

here $promise used gain access raw $http promise object allows use .then() await call resolve. without $promise in other words return gettags.get({ groupid: 12, }) return promise object controller in question no good.

to gain access example $stateparams.id pass function call so:

tags: function (gettags, $stateparams) {     return $stateparams.id; }, 

that's really. don't forget pass in resolved data objects/structures controller.

ps: important note definition controller must come after definition resolve otherwise doesn't work.

pss: hope advice have received , example helps complement answers given.

as mentioned resolve in $stateprovider way go. :

    'use strict';      angular.module('yourapp')         .service('yourservice', function ($http) {             return {                 dosomething: function (id, success, error) {                     return $http.post(                         'rest/bla/' + id, {}                     ).success(function (response) {                        success(response);                     }).error(function () {                         error();                     });                 },                 dosomethingelse: function (id, success, error) {                     return $http.post(                         'rest/bla/' + id, {}                     ).success(function (response) {                        success(response);                     }).error(function () {                         error();                     });                 },                 dosomethingdifferent: function (id, success, error) {                     return $http.post(                         'rest/bla/' + id, {}                     ).success(function (response) {                        success(response);                     }).error(function () {                         error();                     });                 },             };         });          //then in controller          angular.module('yourapp')            .controller('yourcontroller', function(yourservice){             // add success , error function when data returned.              yourservice.dosomething(id, function(data){                 $scope.yourdata = data;                 yourservice.dosomethingelse(id, function(data){                 $scope.somethingelse = data;                 yourservice.dosomethingdifferent(id, function(data){                 $scope.somethingdifferent = data;                  // al 3 have been set can place initialization code here                  }                 }               }, function(){console.log('something went wrong'));            });  should      $stateprovider.state('mystate', {           url: 'the/url/you/want',           resolve:{              yourservice: 'yourservice' // dependency injecting here,              yourfetch: function (yourservice) {                  return yourservice.yourfetch.$promise;              },              yoursecondfetch: function(yourservice) {                 return yourservice.yoursecondfetch.$promise;              },              yourtirthfetch: function(yourservice) {                 return yourservice.yourtirthfetch.$promise;              },              controller: 'yourcontroller'        })      // controller can inject yourfetch , resolved before controller loads fetched prior      .controller('yourcontroller', function($scope, yourfetch, yoursecondfetch, yourtirthfetch) {          $scope.yourfetch = yourfetch;          $scope.secondfetch = yoursecondfetch;          $scope.tirthfetch = yourtirthfetch;     });