Sharing a variable between Controller and Factory - angularjs

Question

I have a variable $scope.name defined in the controller which I am passing to the factory MyService as
$scope.name = MyService.name;
Inside the factory there is
var myserivce = {};
myservice.open = function() {
myservice.name = 'abc';
};
return myservice;
I want to return myservice.name so that abc is stored in $scope.name
How can I do so? Without using rootScope

Answer 1

In JavaScript, variables are shared by assigning them to properties of an object and passing a reference to that object.
app.factory("share", function() {
var objectRef = {};
return {
set: set,
get: get,
getRef: getRef,
};
function set(prop, val) {
objectRef[prop] = val;
}
function get(prop) {
return objectRef[prop];
}
function getRef() {
return objectRef;
}
});
The share.get(prop) method returns the value of the property at the time that the function is invoked. Any changes will not update values previously returned.
The share.getRef() method returns a reference to the object. When the contents of the object changes, every entity that has a reference to that object will share those changes.

Answer 2

Holding the shared data in a factory or service:
app.factory('Holder', function() {
return {
name : 'abc'
};
});
app.controller('YourCtrl', function($scope, Holder) {
$scope.Holder = Holder;
var name = $scope.Holder.name;
});
It's may help you.

Answer 3

If I understand your problem correctly then what you want is the Controller know that name variable is changed in Service and the view should be updated based on that.
This can be done in one of 3 ways:
Using rootScope - Bad way
Using watchers - Ok way
Using pub/sub models
angular
.module("myApp", [])
.controller("CtrlList", CtrlList)
.service("MyService", MyService);
CtrlList.$inject = ["$scope", "MyService"];
MyService.$inject = ["$q", "$timeout"];
function CtrlList($scope, MyService) {
MyService.name.subscribe(function(name) {
$scope.name = name;
});
$scope.$watch(
function() {
return MyService.age;
},
function(newValue, oldValue) {
$scope.age = MyService.age;
console.log(newValue + " " + oldValue);
console.log(MyService.age);
}
);
MyService.open();
}
function MyService($q, $timeout) {
var myservice = { name: new rxjs.Subject(), age: 1 };
myservice.open = function() {
$timeout(function() {
myservice.name.next("Value Changed.");
myservice.age = 2;
}, 10000);
myservice.name.next("Initial Value.");
};
return myservice;
}
* {
font-family: "Work Sans";
padding: 0;
margin: 0;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #F6F7EB;
}
.wrapper {
width: 500px;
border: 1px dotted gray;
padding: 10px;
}
.wrapper .heading {
font-size: 30px;
margin-bottom: 12px;
}
.wrapper p {
margin-bottom: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.3.3/rxjs.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Work+Sans:400' rel='stylesheet' type='text/css'>
<section class="wrapper">
<p class="heading">AngularJS v1.7.5 - Wait for 10 seconds to see changes</p>
<div ng-app="myApp">
<div class="container" ng-controller="CtrlList">
<p>This value is changed through rxjs : {{ name }}</p>
<p>This value is changed through watcher: {{ age }}</p>
</div>
</div>
</section>