angularjs .service doesn't work to pass variables between controllers

Question

I've created a service to pass a boolean flag between controllers. Service looks like this :

angular.module('MyApp')
.service('sharedProperties', function () {

    var flag = false;

    return {
        getProperty: function () {
            return flag;
        },
        setProperty: function(value) {
            flag = value;
        }
    };
});

First controller where flag is set is this

    angular.module('MyApp')
  .controller('test1', function($scope, $location, $http, $window, sharedProperties) {

  $scope.flag1 = function () {
    if ($location.path() == '/') {
      sharedProperties.setProperty(false);
      return false;
    }else {
      sharedProperties.setProperty(true);
      return true;
    };
  };
 });

And controller receiving argument is this

    angular.module('MyApp')
  .controller('test2', function($scope, $location, $http, $window, sharedProperties) {

  $scope.flag2 = sharedProperties.getProperty();

  });

flag1 in test1 takes a correct value, but test2 is always false. If I initialize flag at service as true - it's always true at test2. If I don't initialize it - it's undefined at test2.

score 3 · Accepted Answer · edited May 23 '17 at 12:33

This behaviour is totally expected and is not linked to angularjs in particular, it works like this in vanilla javascript. The issue you encounter is due to the fact that javascript primitives are passed by value and not by reference. You can read more about it here: Is JavaScript a pass-by-reference or pass-by-value language?

How to fix your code? Use an object which will be passed by reference.

Could you try this:

angular.module('MyApp')
.service('sharedProperties', function () {

    var flag = {
        value: false
    };

    return {
        getProperty: function () {
            return flag;
        },
        setProperty: function(value) {
            flag.value = value;
        }
    };
});


angular.module('MyApp')
  .controller('test1', function($scope, $location, $http, $window, sharedProperties) {

  $scope.flag1 = function () {
    if ($location.path() == '/') {
      sharedProperties.setProperty(false);
      return false;
    }else {
      sharedProperties.setProperty(true);
      return true;
    };
  };
 });

angular.module('MyApp')
  .controller('test2', function($scope, $location, $http, $window, sharedProperties) {

  $scope.flag2 = sharedProperties.getProperty();
  // use flag2.value in your markup

  });

Works just great, thank you. Now it's time to learn vanilla js a bit more. — user3081123, Aug 24 '14 at 11:10

Mohamed El Mahallawy · Answer 2 · 2014-08-23T20:28:57.497

The reason being is I believe that Angular initializes a service with new when added to a controller.

So when manipulating in test1, its an instance of the service in that controller which is not shared in the other controller. I could be wrong though and would recommend firstly using this.flag instead of var flag. In addition, your test2 controller makes a call on angular load, rendering false but it doesn't watch for changes.

Created a JSBIN to solve it for you: http://jsbin.com/xoqup/1/edit

angularjs .service doesn't work to pass variables between controllers

2 Answers2