I am currently utilizing a service to transfer variables between two controllers. However, I am encountering difficulties in modifying the value of an object property. My goal is to update this value in the first controller and then access the new value in the second controller. Please see below for my attempt.
You can check out the JSfiddle here
HTML code
<div ng-app="myApp">
<div ng-controller="myController">
<h3>{{objectValue.data}}</h3>
<button ng-click="changeObject()">Change the objectValue</button>
</div>
<div ng-controller="myController2">
<h2>{{ newValue.data}}</h2>
</div>
</div>
JS code
var app = angular.module('myApp', []);
app.service('sharedProperties', function() {
var objectValue = {
data: 'default service value'
};
return {
getObject: function() {
return objectValue;
}
}
});
app.controller('myController', function($scope, sharedProperties) {
$scope.objectValue = sharedProperties.getObject();
var changeObject = function() {
sharedProperties.objectValue.data = "New value";
}
});
app.controller('myController2', function($scope, sharedProperties) {
$scope.newValue = sharedProperties.getObject();
});