Over a million developers have joined DZone.

How to Share Data Between Controllers in AngularJS

How do you share data between controllers in AngularJS? Why, with the SharedDataService method and a defined Product object.

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

Written by Dhananjay Kumar.

In my AngularJS classes, I often get asked, “How do I share data between the controllers in AngularJS?” On the Internet, there are many solutions suggested. However, I prefer to share data using the Shared Data Service method, and that’s what we’re going to explore in this post.

To start with, let’s suppose that we want to share a Product object between the controllers. Here I have created an AngularJS service named SharedDataService as shown in the snippet below:

myApp.service('SharedDataService', function () {

     var Product = {

        name: '',

        price: ''


    return Product;


Next let’s go ahead and create two different controllers using SharedDataService. In the controllers, we are using the service created in the previous step. Controllers can be created as shown below:

var myApp = angular.module("myApp", ['CalService']);

myApp.controller("DataController1", ['$scope', 'SharedDataService',

    function ($scope, SharedDataService) {

    $scope.Product = SharedDataService;


myApp.controller("DataController2", ['$scope', 'SharedDataService',

    function ($scope, SharedDataService) {

    $scope.Product = SharedDataService;


On the view we can simply use the controllers as shown in the listing below:

<div ng-controller="DataController1">

            <h2>In Controller 1h2>

            <input type="text" ng-model="Product.name" /> <br/>

            <input type="text" ng-model="Product.price" />

            <h3>Product {{Product.name}} costs {{Product.price}}  h3>



        <div ng-controller="DataController2">

            <h2>In Controller 2h2>

            <h3>Product {{Product.name}} costs {{Product.price}}  h3>


Now we can share the data between the controllers. As you can see, the name and price of the product is being set in the DataController1, and we are fetching the data in the DataController2.

Do you have any better options that you use to share data? Or perhaps you have a complex scenario which may be not be solved by the above approach. If so, let me know! Tell me about it in the comments below.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

angularjs ,javascript ,html5

Published at DZone with permission of Josh Anderson, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}