I'd like some advice on how to share some data between two or more controllers in AngularJS.

For now I'm just dealing with two controllers, but in the future I will have more controllers that will also want to use this same data. Right now I have a navigation-controller which is controlling the side navigation and the header. And for ease of understanding, let's say the second controller is called content-controller which is responsible for dealing with all the content.

I want to dynamically load the content based on whatever the user searches for and the search bar is in the side navigation, so this searchTerm needs to be accessible by both controllers. In the future, I would also implement some other features which would probably need to access this searchTerm as well.

In terms of the HTML structure, the content-controller is inside the navigation-controller.

My first thought was to make searchTerm globally available by sticking it in $rootScope, but I'm unsure if this is an efficient/secure way to do it.

My second thought was to take the searching aspects and put them into a service. Inside this service I would put functions which would speak to the API in order to get the necessary data. This would mean on the search bar, I can make the submit search button access the service and run something like FooService.update(searchTerm).

What do you think the best way to deal with this scenario is?

I'd like some advice on how to share some data between two or more controllers in AngularJS.

For now I'm just dealing with two controllers, but in the future I will have more controllers that will also want to use this same data. Right now I have a navigation-controller which is controlling the side navigation and the header. And for ease of understanding, let's say the second controller is called content-controller which is responsible for dealing with all the content.

I want to dynamically load the content based on whatever the user searches for and the search bar is in the side navigation, so this searchTerm needs to be accessible by both controllers. In the future, I would also implement some other features which would probably need to access this searchTerm as well.

In terms of the HTML structure, the content-controller is inside the navigation-controller.

My first thought was to make searchTerm globally available by sticking it in $rootScope, but I'm unsure if this is an efficient/secure way to do it.

My second thought was to take the searching aspects and put them into a service. Inside this service I would put functions which would speak to the API in order to get the necessary data. This would mean on the search bar, I can make the submit search button access the service and run something like FooService.update(searchTerm).

What do you think the best way to deal with this scenario is?

• javascript
• angularjs

• Service is certainly better – Icycool Commented Jun 29, 2015 at 10:16
• If using a Service, I would put a function in the nav-controller which gets the search results, but where should I put these results? Only the content-controller needs to access these results so that it can display the data. The navigation just needs to run a search, so essentially I want to use it to run the search and pass the data to the other controller to deal with how to display it and what not. How would you go about that? – germainelol Commented Jun 29, 2015 at 10:19

2 Answers 2

Sharing data between controllers has always been a prominent requirement. You have a couple of options out there :

1. Factory
2. Services

You can refer to this answer, for more details upon the differences.

Using services is definitely the better option, since you won't be polluting the root scope with extra variables [That are destined to grow in numbers as your have already mentioned].

A possible way to store your data in services, and access them in controllers and HTML effortlessly can be described as :

1. Create a service, that will hold all the model variables.

   angular.service("dataService", function() {
   
       this.value1 = "";
       this.value2 = "";
   });
   

2. reference that service in your controllers, saving their reference in the scope.

   angular.controller("myCntrl1", function($scope, dataService) {
       $scope.dataService = dataService;
   });
   
   
   angular.controller("myCntrl2", function($scope, dataService) {
       $scope.dataService = dataService;
   });
   

3. Now in your html, you refer all your modal variables using the service reference :

       // Controller 1 view
       <div ng-controller="myCntrl1">
           <input type="text" ng-model="dataService.value1" />
       </div>
   
       // Controller 2 view
       <div ng-controller="myCntrl2">
           The value entered by user is {{dataService.value1}}
       </div>
   

First of all i don't know whether it's gonna work for you.

You can use local storage.

By using this the same data can be accessed in any controller

Here's an example how it worked for me.

app.controller("loginCtrl", function($scope, $window){
$scope.submit = function(){
    $window.localStorage.setItem = ("username", $scope.username);
    };
 });

app.controller("homeCtrl", function($scope, $window){
$scope.logout = function(){
    $window.localStorage.getItem = ("username");
    };
 });