angular service between controllers

Question

I have a service which is empty on load:

app.factory("bookmark",function(){
 var bookmark = {};
 return bookmark;
});

I have controller A which sets the value of service and redirects to second controller where I try to access the service value which is empty.

Controller A:

app.controller('bookmarksController', function($scope, localStorageService, bookmark) {
 // localStorageService.clearAll();
 $scope.bookmarks = localStorageService.keys();
 $scope.setBookmarkServ = function (key){
 console.log('bookmark service set');
 bookmark = key;
 console.log(bookmark);
 }
 $scope.go2bookmark = function (key){
 console.log('go2bookmark called');
 var obj = localStorageService.get(key);
 return obj.link;
 }
});

Template A:

 <script type="text/ng-template" id="bookmarks">
 <div ng-controller="bookmarksController">
 <hr style="clear:both;opacity:0;" />
 <div class="logo"></div>
 <h1>Bookmarks</h1>
 <div ng-repeat="mark in bookmarks" class="col-xs-12 col-sm-6 col-md-3">
 <a ng-click="setBookmarkServ(mark)" ng-init="theLink = go2bookmark(mark)" href="#{{theLink}}" class="thumbnail alert-info" style="height:150px;">
 <div class="caption">
 <h3>{{ mark }}</h3>
 {{theLink}}
 </div>
 </a>
 </div>
 </div> 
 </script>

Controller B where service is {} empty:

app.controller('baselistController', ['$scope', '$routeParams', '$route', '$http', 'customview', '$location', '$uibModal', '$cacheFactory', '$templateCache', 'columnselector', '$interval', '$rootScope', 'globalVarService', '$window', '$controller', '$timeout', 'localStorageService', 'bookmark',
 function ($scope, $routeParams, $route, $http, customview, $location, $uibModal, $cacheFactory, $templateCache, columnselector, $interval, $rootScope, globalVarService, $window, $controller, $timeout, localStorageService, bookmark) {
 //set value doesn't perist
 console.log(bookmark);
 ...
 ...

Answer 1

app.factory("bookmark",function(){
 var _bookmark = {};
 var setBookMark = function(key){
 _bookmark = key;
 }
 var getBookMark = function(){
 return _bookmark;
 }
 return {
 GetBookMark = getBookMark,
 SetBookMark = setBookMark 
 };
});

Now you can use this service to set and get bookmarks,

In controller A,

app.controller('bookmarksController', function($scope, localStorageService, bookmark) {
 bookmark.SetBookMark(localStorageService.keys(););
}

And get bookmark in Controller B,

app.controller('baselistController', ['$scope', '$routeParams', '$route', '$http', 'customview', '$location', '$uibModal', '$cacheFactory', '$templateCache', 'columnselector', '$interval', '$rootScope', 'globalVarService', '$window', '$controller', '$timeout', 'localStorageService', 'bookmark',
 function ($scope, $routeParams, $route, $http, customview, $location, $uibModal, $cacheFactory, $templateCache, columnselector, $interval, $rootScope, globalVarService, $window, $controller, $timeout, localStorageService, bookmark) {
 console.log(bookmark.GetBookMark());
}

Answer 2

@Abhilash gives the solution, let me explain the reason.

You need to understand the difference between passed by reference and passed by value: What's the difference between passing by reference vs. passing by value?.

You defined a service bookmark, actually it is like:

enter image description here

You injected the service bookmark to your controller. In this case, bookmark is a reference. When you are doing bookmark = key;, you lost the reference to the real object in the memory:

enter image description here

That is why your service cannot be shared between controllers. Because your modification does not actually make affect.

Solution: see @Abhilash's answer.

Answer 3

Instead of

 $scope.bookmarks = localStorageService.keys();

save the bookmarks in

 $rootScope.bookmarks = localStorageService.keys();

so they will be shared across the app.

• Al Ex Tsm: bookmark service is ! = $scope.bookmarks...... $scope will not persist route changes(as far as my understanding goes) i need the use of service/factory...
• M.K. Wierzba: Each time you call bookmark service it creates a new bookmark var, you can try like this: if (!bookmark){ bookmark = {}; } return bookmark
• Archie Reyes: It's a bad practice using $rootScope.