Shared Variables between Controllers with a Service in AngularJS

Question

I'm trying to share a group of variables between my controllers, but it does not seem to be working, I already followed some example but can't make it to work.

Below is the JavaScript

angular.module('PickMeUp.controllers', []).
service('sharedProperties', function() {
  // Car Variables
  var make;
  var model;
  var color;

  // Bldg Variables
  var building = 'b';
      var door = 'd';

  return {
      getCar: function () {
          return make + " " + model + " " + color;
      },
      getBldg: function () {
          return building;
      },
      getDoor: function () {
          return door;
      },
      setCar: function (make1, model1, car1) {
          make = make1;
          model = model1;
          car = car1;
      },
      setBldg: function (building1, door1) {
          building = building1;
          door = door1;
          //****When this is called, displays the new values****
          alert("Bldg " + building);
          alert("Door " + door);
      }
  };
  }  
  })
.controller('MyCtrl2', ['$scope', 'sharedProperties', function ($scope, sharedProperties) {
      $scope.sharedProperties = sharedProperties
      console.log("ctrl2");
      $scope.passenger = 'esau';

      $scope.building = sharedProperties.getBldg();
      $scope.door = sharedProperties.getDoor();

      //****This is giving me the default values****
      console.log($scope.building);
      console.log($scope.door);

      //****This is undefined****
      alert("Bldg " + sharedProperties.building);
      alert("Door " + sharedProperties.door);
  } ])
.controller('BuildingChgCtrl', ['$scope', 'sharedProperties', function ($scope, sharedProperties) {
  $scope.sharedProperties = sharedProperties;
  $scope.buildings = ['DGTC', 'Walmart Home Office', 'Sam\'s Home Office'];
  $scope.exits = ['East', 'West', 'Vendor'];
  $scope.building;
  $scope.door;
  $scope.exitDisplay = 'none';
  $scope.change = function () {
      $scope.exitDisplay = 'inline';
      console.log("changed display");
  };
  console.log("controller called ");

  //$scope.building = sharedProperties.getBldg();
  //$scope.door = sharedProperties.getDoor();

  console.log($scope.building);
  console.log($scope.door);

//      $scope.setBldg = function(b,d) {
//          alert("Bldg " + sharedProperties.building);
//          alert("Door " + sharedProperties.door);
//          
//          sharedProperties.building = b;
//          sharedProperties.door = d;
//          //****When this is called, displays the new values****
//          alert("Bldg " + sharedProperties.building);
//          alert("Door " + sharedProperties.door);
//      }

  } ]);

And below the HTML

building.html

<form action="{{nextURL}}">
<div ng-controller="BuildingChgCtrl">
    <select ng-change="change()" ng-model="$parent.building" ng-options="b for b in buildings">
        <option value="" style="display:none;">Choose building</option>
    </select>
    <br />

    <select style="display:{{exitDisplay}};" ng-model="$parent.door" ng-options="e for e in exits">
        <option value="" style="display:none;">Choose Exit</option>
    </select>
    <br />
    bldg1 = {{building}}, door1 = {{door}} <br />
    <button ng-click="sharedProperties.setBldg(building,door)">Next</button>
    <a href="{{nextURL}}">Next</a>
</div>
<br />
bldg2 = {{building}}, door2 =  {{door}}
</form>

passenger.html

<div><a href="#/driverSubmitOffer">Passenger 1</a></div>

{{passenger}} <br />

building = {{sharedProperties.building}}<br />
door = {{sharedProperties.door}}</div>

index.html at least the important code on this page

...
<div ng-view>
</div>
....

app.js at least the important code

$routeProvider.when('/building', {templateUrl: 'partials/Building.html', controller: 'DriverBuildingCtrl'});
$routeProvider.when('/passengerQueue', {templateUrl: 'partials/Passenger.html', controller: 'MyCtrl2'});

This is how is supposed to work. In building.html I am setting the building (a drop down) when I click on Next button, and I want to display it in passenger.html

Thanks

Answer 1

<button ng-click="setBldg(building,door)">Next</button> is probably throwing an error ( check your browser debug console and let me know if it is the case)

ng-click is trying to call BuildingChgCtrl.setBldg, which doesnt exist in the code you have shown.

if you add the following to your BuildingChgCtrl

$scope.sharedProperties = sharedProperties

and change the ng-click to

<button ng-click="sharedProperties.setBldg(building,door)">Next</button>

that should be a step in the right direction.

Further to that, you will be able to reduce the code if you also add $scope.sharedProperties = sharedProperties to MyCtrl2 and bind with {{sharedProperties.door}}