Executing certain block of code only after angular service gets data from server and completes its execution

In my service:

appRoot.factory('ProgramsResource', function ($resource) {
    return $resource('Home/Program', {}, { Program: { method: 'get', isArray: false } })
});

In my controller:

appRoot.controller('ProgramCtrl', function ($scope, ProgramsResource) {
    $scope.searchPrograms = function () {
        $scope.Programs = ProgramsResource.get(
            {
                Name: $scope.searchProgramName,
            });
    };

    $scope.SortBy = "Name";
    $scope.searchPrograms();

    //Lines of code which I want to execute only after the searchPrograms() completes its execution
    $scope.TotalItems = $scope.Programs.TotalItems;
    $scope.ItemsPerPage = $scope.Programs.ItemsPerPage;
});

searchPrograms(); is responsible for getting data from server. And only after line $scope.searchPrograms(); I want to execute below code:

$scope.TotalItems = $scope.Programs.TotalItems;
$scope.ItemsPerPage = $scope.Programs.ItemsPerPage;

But its not happening like that. Its not waiting for searchPrograms() to complete its operation and executing the lines of code below it. As in js, it won't wait for ajax to complete and executes the lines below it, this is happening. To execute certain code only after ajax completion there is concept of call back functions in js and for the same there is concept of promises in angular.

I got very nice article over angular promises but not able to understand that, how exactly I should use the promises in my case.


ANSWERS:


you can add a callback function parameter into ProgramResource.get:

   $scope.searchPrograms = function () {
        $scope.Programs = ProgramsResource.get(
            {
                Name: $scope.searchProgramName,
            }, function () { 
                $scope.TotalItems = $scope.Programs.TotalItems;
                $scope.ItemsPerPage = $scope.Programs.ItemsPerPage;
            });
    };

You should use $q and deferred promise so you will be able to do something like this

 $scope.searchPrograms().then(function(data) { // data is the data that search programs should return

   $scope.TotalItems = $scope.Programs.TotalItems;
   $scope.ItemsPerPage = $scope.Programs.ItemsPerPage;

 }

make sure that searchPrograms return a promise.

        var deferred = $q.defer();
        var callback = function (response) {
            if(response.error) {
                deferred.reject(response.error)
            }

            deferred.resolve(response);
        };

        //Your service call that need a callback like myService.request(callback);

        return deferred.promise;

So when the request will be done the code will be execute in .then(function(data) {



 MORE:


 ? Deferred Promises with AJAX in Angular
 ? Angular deferred promise
 ? angularjs not executing deferred promise using angular-socket-io
 ? Resolving Promises asyncronously
 ? Resolving Promises asyncronously
 ? Resolving Promises asyncronously
 ? how to resolve a $q for promise?
 ? Angular ngresource and different promises
 ? Angular ngresource and different promises
 ? Angular ngresource and different promises