Angular JS: Increment a Counter in a Service From Controller

Question

I'm trying to fetch a value from an API inside my service for a counter, and then increment on that counter inside my controller:

service

angular.module('app')
.factory('MyService', MyService)

function MyService($http) {
  var url = 'URL;

  return {
    fetchTotal: function(p) {
      return $http.get(url, { params: p })
        .then(function(response) {   
          var total = response.data.meta.total;
          return total;
        }, function(error) {
          console.log("error occured");
        })
    },
    incrementCounter: function(){
      total++;
    }
  }
}

controller

app.controller('Controller1', function ($scope, MyService) {
    var params = {
       ...
    }

    MyService.fetchTotal(params).then(function(response) {
      $scope.counter = response;
    });

    $scope.incrementCounter = function(){
        MyService.incrementCounter();
    }
});

view

<div ng-controller="Controller1">
    {{ counter }}
    <span ng-click="incrementCounter()">increment</span>  
</div>

I can't work out how increment on that total I get back from the API with an ng-click . Is this possible?

Any help is appreciated. Thanks in advance!

Answer 1

Angularjs services are singletons, so you can create variables and share it among controllers.

Notice below how variable total is initialized in the service. Same variable is used for interaction with the controllers by using the getCounter() method.

Also notice the init() method. Your controller can call MyService.init first thing to initialize the total variable.

angular.module('app')
.factory('MyService', MyService)

function MyService($http) {
  var url = 'URL';
  var total = 0; /* or some other initial value*/

  return {

    init: function(){
      $http.get(url, { params: p })
        .then(function(response) {   
          total = response.data.meta.total;

        }, function(error) {
          console.log("error occured");
        });
    },
    incrementCounter: function(){
      total++;
    },
    getCounter: function(){
     return total;
    }
  }
}

See plunker for demo: http://plnkr.co/edit/idSxgm0axk43ydThTbJF?p=preview

Answer 2

Looks like you are doing everything right, except the variable total .

You should initialize it in an upper level so that it is also visible from incrementCounter function:

function MyService($http) {
  var url = 'URL;
  var total = 0; 

  return {
    fetchTotal: function(p) {
      return $http.get(url, { params: p })
        .then(function(response) {   
          total = response.data.meta.total;
          return total;
        }, function(error) {
          console.log("error occured");
        })
     },
     incrementCounter: function(){
       total++;
     }
  }
}

Hope it helps