Angularjs $resource save action return promise object instead actual value of response

I defined this factory to call rest methods:

(function() {
    'use strict';
    angular.module('rgh').factory('Charge', Charge);

    function Charge($resource) {
        return $resource('rgh/charge/charge', {}, {
            'save' : {
                url : 'rgh/charge/charge',
                method : 'POST'
            }
        });
    }
})();

and this RestContrller:

@RestController
@RequestMapping("/rgh/charge/charge")
public class ChargeResource {

    @Autowired
    private IChargeService chargeService;

    @PostMapping
    public long save(@RequestBody ChargeViewModel viewModelEntity) {
        return chargeService.save(ModelMapper.map(viewModelEntity, Charge.class));
    }
}

as you can see the save method returns id of saved object, now i want to get this returned id in angular contrller:

(function() {
    'use strict';

    angular
        .module('rgh')
        .controller('ChargeDetailController', ChargeDetailController);

    function ChargeDetailController(Charge) {
        var vm = this;
        vm.save = save;

        function save() {
            vm.isSaving = true;
            Charge.save(vm.charge, onSaveSuccess, onSaveError);
        }

        var onSaveSuccess = function (result) {
            vm.isSaving = false;

            console.log(result);
        };

        var onSaveError = function () {
            vm.isSaving = false;
        };
    }
})();

but when i check the console, i see $promise object instead of actual id.

You can change your save method in Angular Controller as follows:

function save() {

    vm.isSaving = true;

    Charge.save(vm.charge).$promise
        .then(function (result) {
            console.log(result);
        })
        .catch(function (error) {
            // Error
        })
        .finally(function() {
            vm.isSaving = false;
        });
}