Passing data between angular controllers - angularjs-service

Question

Below is the sample code where I am trying to pass/sync the value between the two controllers. For the same in view I have a textbox and two place holders for showing the value of the textbox.
I have somehow achieved the behavior but still could not figure out why the code is not working in one place and doing well in another. I have mentioned 2 ways, one is working(second way) and one is not(first way).
I have used following:
1 service
2 controllers
1 view
Service
mcApp.factory('mcService', function($rootScope){
var service = {};
//variable 1
service.message = 'Default';
//function 1
service.getMessage = function(){
return this.message;
}
//function 2
service.setMessage = function(msg){
this.message = msg;
}
return service;
});
Controller - First way - Not working
mcApp.controller('mcController1', function ($scope, mcService) {
$scope.message = mcService.getMessage();
$scope.setmsg = function(msg){
mcService.setMessage(msg);
}
});
mcApp.controller('mcController2', function($scope, mcService){
$scope.message = mcService.getMessage();
});
View - First way - Not working
<div ng-app="mcApp">
<div ng-controller="mcController1">
<input type="text" ng-model="message" ng-change="setmsg(message)">
<p ng-bind="message"></p>
</div>
<div ng-controller="mcController2">
<p ng-bind="message"></p>
</div>
</div>
In above code I am updating the value of scope variable "message" by calling the service method "getMessage()" in "mcController2". However it is not getting updated in the view.
Below is the code where instead of directly using the service method "getMessage()" in "mcController2" I have assigned the service to the scope variable.
Controller - Second way - Working
mcApp.controller('mcController1', function ($scope, mcService) {
$scope.message = mcService.getMessage();
$scope.setmsg = function (msg) {
mcService.setMessage(msg);
}
});
mcApp.controller('mcController2', function ($scope, mcService) {
$scope.service = mcService;
});
View - Second way - Working
<div ng-app="mcApp">
<div ng-controller="mcController1">
<input type="text" ng-model="message" ng-change="setmsg(message)">
<p ng-bind="message"></p>
</div>
<div ng-controller="mcController2">
<p ng-bind="service.message"></p>
</div>
</div>
Please NOTE : Using the $rootScope.$broadcast in service and $scope.$on in controller in First way also gets the work done. But I am not able to figure out why Fisrt way is not working.

Answer 1

the first way not work because you pass the primitive object --- pass by value
-- pass by value if the old value has change the variable will not be reflect.
the second way worked well because you pass the complex object --- pass by reference .
-- pass by reference if the old value has change the variable will be reflect.
ex :
var x = {
name: "BeSaRa",
country: "Egypt",
like: [
'PHP',
'Javascript',
'MYSQL'
]
};
var v = x.name; // pass by value becouse the string is primitve object
var r = x.like; // pass by reference because the array is Complex Object
// try to change the name below this line
x.name = "Ahmed Mostafa";
console.log(v) // output --> "BeSaRa" it is not reflected by the change
// try to change the like property below this line
x.like.push("AngularJS"); // add AngularJS to the Array
console.log(r) // output ['PHP','Javascript','MYSQL','AngularJS'];
i hope you understand now :D
the primitives types in JavaScript:
Boolean
Null
Undefined
Number
String
Symbol (new in ECMAScript 6)
any thing else Complex :)