{"id":10042,"date":"2016-01-12T12:11:11","date_gmt":"2016-01-12T10:11:11","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=10042"},"modified":"2016-01-02T13:17:34","modified_gmt":"2016-01-02T11:17:34","slug":"best-way-sharing-data-controllers-angularjs-1-x","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/","title":{"rendered":"The best way for sharing data between controllers in AngularJS 1.x"},"content":{"rendered":"<p>You may know the situation in AngularJS 1.x when multiple independent controllers need to share some data. E.g. one controller adds some data that should be available in the other controllers in the same view. So far as I know there are three possibilities:<\/p>\n<ul>\n<li>Using <strong>$scope<\/strong>, e.g. <strong>$scope<\/strong> of a common parent controller or <strong>$rootScope<\/strong><\/li>\n<li>Using publish-subscribe design pattern via <strong>$emit<\/strong> \/ <strong>$broadcast<\/strong> (fire events) and <strong>$on<\/strong> (listen for events)<\/li>\n<li>Using services which can be injected in multiple controllers.<\/li>\n<\/ul>\n<p>The first possibility to share data via\u00a0<strong>$scope<\/strong> is a bad idea. If you share data via scopes, you have to know controllers&#8217; parent-child relationship. That means, your controllers are tightly coupled and the refactoring is hard to master. Some AngularJS examples save the data on the\u00a0<strong>$rootScope<\/strong>, but the pollution of\u00a0<strong>$rootScope<\/strong> is not recommended. Keep the\u00a0<strong>$rootScope<\/strong> as small as possible.<\/p>\n<p>The event based possibility to share data via\u00a0<strong>$emit<\/strong>,\u00a0<strong>$broadcast<\/strong> and<strong>\u00a0$on<\/strong> is a better approach in comparison to scope based one. The controllers are loosely coupled. But there is a disadvantage as well &#8211; the performance. The performance is ok for a small application, but for a large application with hundreds of\u00a0<strong>$on<\/strong> listeners, the AngularJS has to introspect all scopes in order to find the\u00a0<strong>$on<\/strong> listeners that fit to the corresponsing\u00a0<strong>$emit<\/strong> \/\u00a0<strong>$broadcast<\/strong>. From the architecture point there is a shortcoming as well &#8211; we still need scopes to register\u00a0<strong>$emit<\/strong>,\u00a0<strong>$broadcast<\/strong> and\u00a0<strong>$on<\/strong>.<\/p>\n<p>Some people also say &#8211; communication details should be hidden for the same reason we keep\u00a0<strong>$http<\/strong> hidden behind a service layer. There are\u00a0<a href=\"http:\/\/www.technofattie.com\/2014\/03\/21\/five-guidelines-for-avoiding-scope-soup-in-angular.html\">5 guidelines for avoiding scope soup in AngularJS<\/a>. The last 5. rule is called\u00a0<strong>Don&#8217;t Use Scope To Pass Data Around<\/strong>. It advices against using scopes directly and against event based approach. Last but not least &#8211; think about the upcomming AngularJS 2. It doesn&#8217;t have scopes!<\/p>\n<p>In my opinion, the preferred way for sharing data between controllers in AngularJS 1.x is the third possibility. We can use services. A service can keep data or acts as event emitter (example is shown below). Any service can be injected into controllers, so that conrollers still don&#8217;t know from each other and thus are loosely coupled. I will refactor and extend\u00a0<a href=\"https:\/\/daveceddia.com\/sharing-data-between-controllers-best-practice-use-a-service\/\">one example from this blog post<\/a>.<\/p>\n<p>The author of this blog post implemented two controllers for two panes. In the left pane we can input some text and add it as an item to a list in the right pane. The list itself is placed in a service (service encapsulates the data). This is probably a good idea when you have different views or controllers in conditional\u00a0<strong>ng-if<\/strong>. But if controllers exist in the same view and show their data at the same time, the list should reside in the controller for the right pane and not in the service. The list belongs to the second controller.<\/p>\n<p>This is my opinion, so I will move the list into the controller and also add a third &#8220;message controller&#8221; which is responsible for messages when user adds items to the list or removes them from the list. We thus have three controllers and one service. The idea is to apply the listener pattern (also known as observer) to the service. The service acts as event emitter. Every controller can fire an ADD or REMOVE operation and register a listener function to be notified when the operation is done. The added \/ removed item acts as data passed along with operation into all registered listeners for the given operation.<br \/>\n<a href=\"http:\/\/plnkr.co\/edit\/sYraTzhscg7wIZ0S1O9v?p=preview\">The live example<\/a> is implemented on Plunker.<\/p>\n<p>The first picture shows the adding process (click on the button\u00a0<strong>Add To List<\/strong>) with a message about the successfully added item.<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/12\/addItem.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-10056\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/12\/addItem.png\" alt=\"addItem\" width=\"615\" height=\"180\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/12\/addItem.png 615w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/12\/addItem-300x88.png 300w\" sizes=\"(max-width: 615px) 100vw, 615px\" \/><\/a><\/p>\n<p>The second picture shows the removing process (click on a link with\u00a0<strong>x<\/strong> symbol) with a message about the successfully removed item.<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/12\/removeItem.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-10057\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/12\/removeItem.png\" alt=\"removeItem\" width=\"612\" height=\"206\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/12\/removeItem.png 612w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/12\/removeItem-300x101.png 300w\" sizes=\"(max-width: 612px) 100vw, 612px\" \/><\/a><\/p>\n<p>The HTML part looks as follows:<\/p>\n<pre class=\" brush:xml\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=\"utf-8\" \/&gt;\r\n    &lt;meta content=\"IE=edge\" http-equiv=\"X-UA-Compatible\" \/&gt;\r\n    &lt;script src=\"https:\/\/code.angularjs.org\/1.4.8\/angular.js\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n\r\n&lt;body ng-app=\"app\"&gt;\r\n    &lt;div ng-controller=\"MessageController as ctrlMessage\" style=\"margin-bottom:20px;\"&gt;\r\n        &lt;span ng-bind-html=\"ctrlMessage.message\"&gt;&lt;\/span&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;div ng-controller=\"PaneOneController as ctrlPaneOne\"&gt;\r\n        &lt;input ng-model=\"ctrlPaneOne.item\"&gt;\r\n        &lt;button ng-click=\"ctrlPaneOne.addItem(ctrlPaneOne.item)\"&gt;Add To List&lt;\/button&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;div ng-controller=\"PaneTwoController as ctrlPaneTwo\" style=\"float:right; width:50%; margin-top:-20px;\"&gt;\r\n        &lt;ul style=\"margin-top:0\"&gt;\r\n            &lt;li ng-repeat=\"item in ctrlPaneTwo.list track by $index\"&gt;\r\n                {{item}}\r\n                &lt;a href style=\"margin-left:5px;\" title=\"Remove\" ng-click=\"ctrlPaneTwo.removeItem($index)\"&gt;x&lt;\/a&gt;\r\n            &lt;\/li&gt;\r\n        &lt;\/ul&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;script src=\"controller.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"service.js\"&gt;&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>As you can see, there are three independent HTML div elements with\u00a0<strong>ng-controller<\/strong> directive. The\u00a0<strong>MessageController<\/strong> shows a message above. The\u00a0<strong>PaneOneController<\/strong> keeps an input value and the function\u00a0<strong>addItem()<\/strong>. The\u00a0<strong>PaneTwoControlle<\/strong>r keeps a list with all items and the function\u00a0<strong>removeItem()<\/strong>. The controllers look as follows in details:<\/p>\n<pre class=\" brush:js\">(function() {\r\n    var app = angular.module('app', []);\r\n    app.controller('PaneOneController', PaneOneController);\r\n    app.controller('PaneTwoController', PaneTwoController);\r\n    app.controller('MessageController', MessageController);\r\n\r\n    \/* first controller *\/\r\n    function PaneOneController(EventEmitterListService) {\r\n        var _self = this;\r\n        this.item = null;\r\n\r\n        this.addItem = function(item) {\r\n            EventEmitterListService.emitAddItem(item);\r\n            _self.item = null;\r\n        }\r\n    }\r\n\r\n    \/* second controller *\/\r\n    function PaneTwoController($scope, EventEmitterListService) {\r\n        var _self = this;\r\n        this.list = [];\r\n\r\n        this.removeItem = function(index) {\r\n            var removed = _self.list.splice(index, 1);\r\n            EventEmitterListService.emitRemoveItem(removed[0]);\r\n        }\r\n\r\n        EventEmitterListService.onAddItem('PaneTwo', function(item) {\r\n            _self.list.push(item);\r\n        });\r\n\r\n        $scope.$on(\"$destroy\", function() {\r\n            EventEmitterListService.clear('PaneTwo');\r\n        });\r\n    }\r\n\r\n    \/* third controller *\/\r\n    function MessageController($scope, $sce, EventEmitterListService) {\r\n        var _self = this;\r\n        this.message = null;\r\n\r\n        EventEmitterListService.onAddItem('Message', function(item) {\r\n            _self.message = $sce.trustAsHtml(\"&lt;strong&gt;\" + item + \"&lt;\/strong&gt; has been added successfully\");\r\n        });\r\n\r\n        EventEmitterListService.onRemoveItem('Message', function(item) {\r\n            _self.message = $sce.trustAsHtml(\"&lt;strong&gt;\" + item + \"&lt;\/strong&gt; has been removed successfully\");\r\n        });\r\n\r\n        $scope.$on(\"$destroy\", function() {\r\n            EventEmitterListService.clear('Message');\r\n        });\r\n    }\r\n})();<\/pre>\n<p>All three controllers communicate with a service called\u00a0<strong>EventEmitterListService<\/strong>. The service exposes three methods:<\/p>\n<ul>\n<li><strong>emitAddItem<\/strong> &#8211; notifies listeners that are interested in adding an item to the list. The item is passed as parameter.<\/li>\n<li><strong>emitRemoveItem<\/strong> &#8211; notifies listeners that are interested in removing an item from the list. The item is passed as parameter.<\/li>\n<li><strong>onAddItem<\/strong> &#8211; registers a listener function that is interested in adding an item to the list. The listener is passed as parameter.<\/li>\n<li><strong>onRemoveItem<\/strong> &#8211; registers a listener function that is interested in removing an item from the list. The listener is passed as parameter.<\/li>\n<li><strong>clear<\/strong> &#8211; removes all registered listeners which belong to the specified controller. The controller is identified by the scope parameter (simple unique string).<\/li>\n<\/ul>\n<p>The<strong>\u00a0clear<\/strong> method is important when the\u00a0<strong>$scope<\/strong> gets destroyed (e.g. when the DOM associated with the\u00a0<strong>$scope<\/strong> gets removed due to\u00a0<strong>ng-if<\/strong> or view switching). This method should be invoked on\u00a0<strong>$destroy<\/strong> event &#8211; see code snippets with\u00a0<strong>$scope.$on(&#8220;$destroy&#8221;, function() {&#8230;})<\/strong>. The full code of the service is listed below:<\/p>\n<pre class=\" brush:js\">(function() {\r\n    var app = angular.module('app');\r\n    app.factory('EventEmitterListService', EventEmitterListService);\r\n\r\n    function EventEmitterListService() {\r\n        \/\/ Format of any object in the array:\r\n        \/\/ {scope: ..., add: [...], remove: [...]}\r\n        \/\/ \"scope\": some identifier, e.g. it can be the part of controller's name\r\n        \/\/ \"add\": array of listeners for the given scope to be notified when an item is added\r\n        \/\/ \"remove\": array of listeners for the given scope to be notified when an item is removed\r\n        var listeners = [];\r\n\r\n        function emitAddItem(item) {\r\n            emitAction('add', item);\r\n        }\r\n\r\n        function onAddItem(scope, listener) {\r\n            onAction('add', scope, listener);\r\n        }\r\n\r\n        function emitRemoveItem(item) {\r\n            emitAction('remove', item);\r\n        }\r\n\r\n        function onRemoveItem(scope, listener) {\r\n            onAction('remove', scope, listener);\r\n        }\r\n\r\n        function clear(scope) {\r\n            var index = findIndex(scope);\r\n            if (index &gt; -1) {\r\n                listeners.splice(index, 1);\r\n            }\r\n        }\r\n\r\n        function emitAction(action, item) {\r\n            listeners.forEach(function(obj) {\r\n                obj[action].forEach(function(listener) {\r\n                    listener(item);\r\n                });\r\n            });\r\n        }\r\n\r\n        function onAction(action, scope, listener) {\r\n            var index = findIndex(scope);\r\n            if (index &gt; -1) {\r\n                listeners[index][action].push(listener);\r\n            } else {\r\n                var obj = {\r\n                    'scope': scope,\r\n                    'add': action == 'add' ? [listener] : [],\r\n                    'remove': action == 'remove' ? [listener] : []\r\n                }\r\n                listeners.push(obj);\r\n            }\r\n        }\r\n\r\n        function findIndex(scope) {\r\n            var index = -1;\r\n            for (var i = 0; i &lt; listeners.length; i++) {\r\n                if (listeners[i].scope == scope) {\r\n                    index = i;\r\n                    break;\r\n                }\r\n            }\r\n\r\n            return index;\r\n        }\r\n\r\n        var service = {\r\n            emitAddItem: emitAddItem,\r\n            onAddItem: onAddItem,\r\n            emitRemoveItem: emitRemoveItem,\r\n            onRemoveItem: onRemoveItem,\r\n            clear: clear\r\n        };\r\n\r\n        return service;\r\n    }\r\n})();<\/pre>\n<p>That&#8217;s all!<\/p>\n<div class=\"attribution\">\n<table>\n<tbody>\n<tr>\n<td><span class=\"reference\">Reference: <\/span><\/td>\n<td><a href=\"http:\/\/ovaraksin.blogspot.com\/2015\/12\/the-best-way-for-sharing-data-between.html\">The best way for sharing data between controllers in AngularJS 1.x<\/a> from our <a href=\"http:\/\/www.webcodegeeks.com\/join-us\/wcg\/\">WCG partner<\/a> Oleg Varaksin at the <a href=\"http:\/\/ovaraksin.blogspot.com\/\">Thoughts on software development<\/a> blog.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>You may know the situation in AngularJS 1.x when multiple independent controllers need to share some data. E.g. one controller adds some data that should be available in the other controllers in the same view. So far as I know there are three possibilities: Using $scope, e.g. $scope of a common parent controller or $rootScope &hellip;<\/p>\n","protected":false},"author":15,"featured_media":909,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[],"class_list":["post-10042","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>The best way for sharing data between controllers in AngularJS 1.x - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"You may know the situation in AngularJS 1.x when multiple independent controllers need to share some data. E.g. one controller adds some data that should\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The best way for sharing data between controllers in AngularJS 1.x - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"You may know the situation in AngularJS 1.x when multiple independent controllers need to share some data. E.g. one controller adds some data that should\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2016-01-12T10:11:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Oleg Varaksin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Oleg Varaksin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/\"},\"author\":{\"name\":\"Oleg Varaksin\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/907f82ccdf11dbd8f7b6af2c1024d712\"},\"headline\":\"The best way for sharing data between controllers in AngularJS 1.x\",\"datePublished\":\"2016-01-12T10:11:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/\"},\"wordCount\":907,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"articleSection\":[\"Angular.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/\",\"name\":\"The best way for sharing data between controllers in AngularJS 1.x - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"datePublished\":\"2016-01-12T10:11:11+00:00\",\"description\":\"You may know the situation in AngularJS 1.x when multiple independent controllers need to share some data. E.g. one controller adds some data that should\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Angular.js\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"The best way for sharing data between controllers in AngularJS 1.x\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/907f82ccdf11dbd8f7b6af2c1024d712\",\"name\":\"Oleg Varaksin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/fda1ce47105421f7a352a13dbefec14ab59d59ffae99c6c3002e5841578979d3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/fda1ce47105421f7a352a13dbefec14ab59d59ffae99c6c3002e5841578979d3?s=96&d=mm&r=g\",\"caption\":\"Oleg Varaksin\"},\"sameAs\":[\"http:\/\/ovaraksin.blogspot.com\/\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/oleg-varaksin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The best way for sharing data between controllers in AngularJS 1.x - Web Code Geeks - 2026","description":"You may know the situation in AngularJS 1.x when multiple independent controllers need to share some data. E.g. one controller adds some data that should","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/","og_locale":"en_US","og_type":"article","og_title":"The best way for sharing data between controllers in AngularJS 1.x - Web Code Geeks - 2026","og_description":"You may know the situation in AngularJS 1.x when multiple independent controllers need to share some data. E.g. one controller adds some data that should","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2016-01-12T10:11:11+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","type":"image\/jpeg"}],"author":"Oleg Varaksin","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Oleg Varaksin","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/"},"author":{"name":"Oleg Varaksin","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/907f82ccdf11dbd8f7b6af2c1024d712"},"headline":"The best way for sharing data between controllers in AngularJS 1.x","datePublished":"2016-01-12T10:11:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/"},"wordCount":907,"commentCount":2,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","articleSection":["Angular.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/","name":"The best way for sharing data between controllers in AngularJS 1.x - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","datePublished":"2016-01-12T10:11:11+00:00","description":"You may know the situation in AngularJS 1.x when multiple independent controllers need to share some data. E.g. one controller adds some data that should","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/best-way-sharing-data-controllers-angularjs-1-x\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Angular.js","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/"},{"@type":"ListItem","position":4,"name":"The best way for sharing data between controllers in AngularJS 1.x"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/907f82ccdf11dbd8f7b6af2c1024d712","name":"Oleg Varaksin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/fda1ce47105421f7a352a13dbefec14ab59d59ffae99c6c3002e5841578979d3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fda1ce47105421f7a352a13dbefec14ab59d59ffae99c6c3002e5841578979d3?s=96&d=mm&r=g","caption":"Oleg Varaksin"},"sameAs":["http:\/\/ovaraksin.blogspot.com\/"],"url":"https:\/\/www.webcodegeeks.com\/author\/oleg-varaksin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/10042","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=10042"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/10042\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/909"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=10042"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=10042"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=10042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}