Shared Variables between Controllers with a Service in AngularJS - 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>
Next
</div>
<br />
bldg2 = {{building}}, door2 = {{door}}
</form>
passenger.html
<div>Passenger 1</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}}