Angular JS success callback

I m reaching out to you to get assistance on the $promise issue with AngularJS.

Here is the documentation information on $resource and it will be applicable to $http as well

link

Having said that, I m trying to make an API call and on success want to perform callback action. Since the operation takes place asynchronously, callback action takes place even before the API call gets completed. This leads to incorrect data reflection. Here is the simple get example, using $resource and $http. In both the cases the actual expectation is that console log should show the actual data but it shows the promise data and resulting in the callback function getting called even before the API calls get completed

$http.get('../../../Employee/GetEmployees').success(function (data) {
        console.log(data);
    });


   return $resource('../../../Employee/GetEmployees', {},
        {
            query: { method: 'GET', isArray: true },
        });

I have provided the example just for giving the clear picture but my actual problem comes with “PUT”(Update). As per the logic, update has to take place first through API call and then the page needs to be redirected to the List page where the updated data will be queried and rendered. Any recommendation on this will be greatly appreciated.

 $scope.UpdateEmp = function () {
        var empl = $scope.Employee;
        empFactory.empUpdate.update({ EmpID: $routeParams.EmpID, empval: empl }).$promise.then(function () { // update method in my resource uses $resource
            $location.path('/EmpList'); //redirect to list
        });

P.S: For time being, please leave about the URL, please visualize it as an API which returns JSON object.

Here is the complete code

Here is the complete code.

Routing:

var myApp = angular.module('myApp', ['emp', 'ngRoute']);

myApp.config(function ($routeProvider) {

    $routeProvider
        .when('/',
        {
            templateUrl: 'pages/EmpList.html',
            controller: 'empController'
        }
        )
    .when('/EmpDetail/:EmpID',
    {
        templateUrl: 'pages/EmpDetail.html',
        controller: 'empDetailController'
    }
)
     .when('/EmpList',
    {
        templateUrl: 'pages/EmpList.html',
        controller: 'empController'
    }
    )
     .when('/EmpCreate',
    {
        templateUrl: 'pages/EmpCreate.html',
        controller: 'empCreateController'
    });

});

Here is the controller method

    myApp.controller('empController', function ($scope, $routeParams, $location, empFactories, empFactory, $http, empHttpFactory) {

            $scope.Employees = empFactories.query();

            $scope.edit = function (EmpID) {
            $location.path('/EmpDetail/' + EmpID);
        };


        $scope.Delete = function (empID) {
            empFactory.empDelete.del({ EmpID: empID }, function () {
                $location.path('/EmpList');
            });
        }

        $scope.Createnew = function () {
            $location.path('/EmpCreate');
        }


    });

    myApp.controller('empDetailController', function ($scope, empFactory,empFactories, $routeParams, $location) {

        $scope.Employee = empFactory.employee.show({ EmpID: $routeParams.EmpID });

        console.log($scope.Employee);

        $scope.UpdateEmp = function () {
            var empl = $scope.Employee;
            empFactory.empUpdate.update({ EmpID: $routeParams.EmpID, empval: empl }).$promise.then(function () { // update method in my resource uses $resource
                $location.path('/EmpList'); //redirect to list
            }); 

        };

    });

Here is the service

var myservice = angular.module('emp', ['ngResource', 'ngRoute']);
myservice.factory('empFactories', function ($resource) {
    return $resource('../../../Employee/GetEmployees', {},
        {
            query: { method: 'GET', isArray: true },
            create: { method: 'POST' }
        });
});

myservice.factory('empFactory', function ($resource) {



    //return $resource('../../Employee/GetEmployee/:EmpID', { EmpID: '@EmpID' },
    //      {
    //          show: { method: 'GET' }
    //      });


    var resource = {
        employee:
            $resource('../../Employee/GetEmployee/:EmpID', { EmpID: '@EmpID' },
           {
               show: { method: 'GET' }

           }),
        empUpdate:
            $resource('../../Employee/PutEmployee/:EmpID', { EmpID: '@EmpID', empval: '@empl' }, { update: { method: 'PUT', isArray: true } }),
        empDelete:
            $resource('../../Employee/DeleteEmployee/:EmpID', { EmpID: '@EmpID' }, { del: { method: 'DELETE', isArray: true } }),

        empCreate:
            $resource('../../Employee/CreateEmployee', { empval: '@empl' }, { create: { method: 'POST', isArray: true } })
    }

    return resource;
});