Updating a service variable in one controller and using the updated value in another controller - Angular JS

Question

I have defined a service called NameService in my controller.js . I want to use the variable present in the NameService in two different controllers.

My service is as follows

App.service('NameService', function(){
  this.Name = "";
  this.getName = function(){
    return this.Name;
  };
  this.setName = function(name){
    this.Name = name;
  }
});

I have a controller named netController in which I am updating the value of the Name variable present in my Nameservice . I want to use the updated value in my page1Controller .

NetController is as follows:

App.controller('netController', ['$scope','$http','$window','NameService',  function($scope,$http,$window,NameService)
    {
        $scope.initNet = function()
        {
            $http.post('/initNet',$scope.network).success(function(response) 
            {
                if(response.status == "true")
                {
                     $scope.$watch('NameService.setName()', function(){
                        NameService.Name = $scope.network.name;
                     });
                     NameService.setName($scope.network.name);
                     $window.location.href = '/page1';
                } 
                else
                {
                    $scope.error = "Error!";
                }
            });
        }
    }]);

If i do console.log(NameService.netName); in my netController it is printing the updated value.

page1Controller is as follows

    App.controller('page1Controller', ['$scope', '$http','NameService', function($scope, $http,NameService)
    {
          console.log(NameService.Name);
    }]);

When is do console.log(NameService.name); in my page1Controller it is giving empty string.

Can someone please help me in fixing this?

Answer 1

use factory instead of service

gisApp.factory('NameService', function () {
    var _name = "";
    return {

        getName: function () {
            return _name;
        },
        setName: function (name) {
            _name = name;
        }
    }
});

Answer 2

because when you call to print that variable, it's not defined yet. $http return promise and it needs some time interval.Have you tried to set interval inside page1Controller ? like

App.controller('page1Controller', ['$scope', '$http','NameService', '$timeout' function($scope, $http,NameService, $timeout)
{
    $timeout(function(){
      console.log(NameService.name)
    },2000);
...

Edited

Then try something like this

gisApp.service('NameService', function(){
  return {
   Name: '',
   getName: function(){
     return this.Name;
   },
   setName: function(name){
     this.Name = name;
   }
});

because the syntax you use, you have to create a instance of that service using " new " to use it as a class.