How to update controller variable in service angularJS

Question

This is my controller.

sampleApp.controller('SupplierController', ['$scope', '$http', 'SupplierService', function ($scope, $http, SupplierService){

    $scope.Suppliers = [];

    $scope.getSuppliers = function() {
        SupplierService.getSuppliers().then(function(data) {
            $scope.Suppliers = data;
        });
    };

    $scope.editSupplier = function(supplier) {
        SupplierService.editSupplier(supplier);
        editMode = false;
    };

    $scope.getSuppliers();

}]);

This is my service.

sampleApp.factory('SupplierService', function($http, $q) {

    var SupplierService =  {};
    var SupplierList = [];

    SupplierService.getSuppliers = function() {

        var Info = {};
        Info.Action = "GET";
        Info = JSON.stringify (Info);

        var req = {
        url: SupplierURL,
        method: 'POST',
        headers: { 'Content-Type': 'application/json'},
        data: Info
        };

        if ( SupplierList.length === 0 )
        {
            return $http(req).then(function (response) {
                SupplierList = response.data
                return response.data;
            });
        }
        else
        {
           var deferred = $q.defer();
           deferred.resolve(SupplierList);
           return deferred.promise;
        }
    };


    SupplierService.addNewSupplier = function(supplier)  {
        var Info = {};
        Info.Action = "ADD";
        Info.SupplierName = supplier.name;
        Info.SupplierMobile = supplier.mobile;
        Info = JSON.stringify (Info);

        var req = {
            url: SupplierURL,
            method: 'POST',
            headers: { 'Content-Type': 'application/json'},
            data: Info
        };

        $http(req)
        .success(function(data) {
            alert ('Supplier update is successful.');
        })  
        .error(function (data, status, headers, config) {
            alert ('Supplier update error.');
        });
    };      
    SupplierService.editSupplier = function(supplier)  {
        var Info = {};
        Info.Action = "UPDATE";
        Info.SupplierID = supplier.id;
        Info.SupplierName = supplier.name;
        Info.SupplierMobile = supplier.mobile;
        Info = JSON.stringify (Info);

        var req = {
            url: SupplierURL,
            method: 'POST',
            headers: { 'Content-Type': 'application/json'},
            data: Info
        };

        $http(req)
        .success(function(data) {
            alert ('Supplier update is successful.');
        })
        .error(function (data, status, headers, config) {
            alert ('Supplier update error.');
        });
    };

    return SupplierService;
});

What i want is, only when http call for editSupplier is successful then only i want this line to be executed.

editMode = false;

Currently above line is in $scope.editSupplier function. so irrespective of success or failure it is getting called. How to move this line to service??

Any better approach will be highly appreciated.

Answer 1

@tandrewnichols stole my initial answer so I'll offer the alternative.:p

Move editMode into the service and use a getter to check the value of editMode. Also, are you intending to make editMode a global variable in your application?

Answer 2

The easiest way, based on your current setup, would be to return $http(req) (as that is a promise). So the end of editSupplier would say:

return $http(req);

And in your controller, you could do:

SupplierService.editSupplier(supplier).success(function(response) {
  editMode = false;
});

You could additionally chain the .error handler if you have something specific to do in the case of an error.