How can I pass data between controllers in AngularJS?

Question

I need to keep two separate controllers, one for a search area and one to display data. When a search is performed I need to fetch data from the internet and update the view with the new data. I don't want to wrap everything with a bigger controller or something like that (is this best practice?) but I'd prefer the search and display controllers to remain completely separate.

This is the html code relative to the search field and display grid

<div id="mainContainer" class="container-fluid" >


    <div id="searchContainer">
        <div id="search" ng-controller="SearchController as srcCtrl">
            <!-- on submit call submit(title) -->
            <form class="navbar-form" role="search">
                <div class="input-group">
                    <input ng-model="title" type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
                    <div class="input-group-btn">
                        <button class="btn btn-default" ng-click="srcCtrl(title)"><i class="glyphicon glyphicon-search"></i></button>
                    </div>
                </div>
            </form>
        </div>

    </div>


    <div id="animeContainer" class="container-fluid">
        <div class="clearfix"></div>
        <!-- animeContainer directive -->
        <anime-container></anime-container>
    </div>


</div>

And the Angular code:

(function(){
var app = angular.module('hummingbird', []);


app.controller('AnimeListController', function(){

    this.anime = animeList;     //list of anime to display in anime list

    this.onSelectAnime = function(anime){
        console.log(anime);
    };
});


app.controller('SearchController', function(){

    this.submit = function(srcstr){

        //here I call the API and then I want to update the anime variable in AnimeListController
        console.log(srcstr);
    }

});

app.directive("animeContainer", function(){
    return{
        restrict: 'E',
        templateUrl: 'anime-container.html',
    }
});

var animeList = [{"id":25,"slug":"ghost-in-the-shell","status":"Finished Airing","url":"https://hummingbird.me/anime/ghost-in-the-shell","title":"Ghost in the Shell","alternate_title":null,"episode_count":1,"cover_image":"https://static.hummingbird.me/anime/poster_images/000/000/025/large/25.jpg?1408440508","synopsis":"In the year 2029, the barriers of our world have been broken down by the net and by cybernetics, but this brings new vulnerability to humans in the form of brain-hacking. When a highly-wanted hacker known as 'The Puppetmaster' begins involving them in politics, Section 9, a group of cybernetically enhanced cops, are called in to investigate and stop the Puppetmaster. The pursuit will call into question what makes a human and what is the Puppetmaster in a world where the distinction between human and machine is increasingly blurry.\n(Source: ANN)","show_type":"Movie"},{"id":1411,"slug":"ghost-hunt","status":"Finished Airing","url":"https://hummingbird.me/anime/ghost-hunt","title":"Ghost Hunt","alternate_title":"","episode_count":25,"cover_image":"https://static.hummingbird.me/anime/poster_images/000/001/411/large/1411.jpg?1408443952","synopsis":"Telling ghost stories is a favorite past time of Mai Taniyama and her friends—that is, until she meets 17-year-old Kazuya Shibuya, the man sent by Shibuya Psychic Research Center to investigate paranormal activity at a supposedly haunted school. When Mai gets caught in a dangerous situation, she is rescued by Kazuya's assistant. Saving her lands the assistant incapacitated, and Kazuya demands that Mai become his assistant, instead. (Source: ANN)","show_type":"TV"},{"id":4135,"slug":"seven-ghost","status":"Finished Airing","url":"https://hummingbird.me/anime/seven-ghost","title":"07-Ghost","alternate_title":"","episode_count":25,"cover_image":"https://static.hummingbird.me/anime/poster_images/000/004/135/large/4135.jpg?1408451649","synopsis":"Set in a gothic fantasy world, this is the story of Teito Klein, an orphaned slave who became the top military academy student. However, an unexpected turn of events left him pursued by the forces of the Barsburg Empire. Now an escaping convict, Teito's sheltered by the church and its law of sanctuary. Here, he discovered many mysteries surrounding himself, the church, and the Empire itself. The fact that he might be connected to a dethroned king and the mystical stone of god, \"The Eye of Mikhael\", made him the target of the empire more than ever. Fortunately the church is under the mythical 7 Ghost protection. But who are the Ghosts really. Will Teito be free from the military's clutch, and what of his said mission to uncover the history. And who is the military's Chief-of-Staff Ayanami exactly. Teito's future seems to have spiraled into an unexpectedly perilous path.\r\n[Source: ANN]","show_type":"TV"},{"id":6391,"slug":"ghost-messenger","status":"Currently Airing","url":"https://hummingbird.me/anime/ghost-messenger","title":"Ghost Messenger","alternate_title":null,"episode_count":6,"cover_image":"https://static.hummingbird.me/anime/poster_images/000/006/391/large/6391.jpg?1408458272","synopsis":"Ghost Messengers are super-power agents from the underground world called the World of Death. The World of Death is a digitalized world with cutting-edge technologies that control and manage the life and death of all living things based on its elaborate systems.\r\nOur Ghost Messenger hero, Kang-lim, has been dispatched to the human world to capture the remaining ghosts who are refusing to go to the World of Death although it is their time.\r\nAn accident occurs during his mission and Kang-lim gets captured in his own mobile phone. Little Kang-lim, a human boy who has extraordinary spiritual powers, finds the mobile phone and takes GhostMessenger Kang-lim out from the mobile phone.\r\nAnd the adventure begins.\r\n(Source: Anime World Network)","show_type":"OVA"},{"id":2360,"slug":"shinreigari-ghost-hound","status":"Finished Airing","url":"https://hummingbird.me/anime/shinreigari-ghost-hound","title":"Shinreigari: Ghost Hound","alternate_title":null,"episode_count":22,"cover_image":"https://static.hummingbird.me/anime/poster_images/000/002/360/large/2360.jpg?1408446509","synopsis":"In an isolated region of Kyushu lies the town of Suiten.  Though seeming small and modest, Suiten is not a picturesque place for a vacation, unless it is from the “Unseen Worldâ€.  Taro, Makoto and Masayuki, three boys with traumatic pasts, learn to let their souls cross between the two parallel worlds.  However, the Unseen World is no mere copy of the real Apparent World.  The Unseen World is the home of ghosts, but changes are now allowing the souls of the dead to pass over into the Apparent World, with unpredictable effects.  Follow the journey of Taro, Makoto and Masayuki, as they cross between the two worlds, trying to unravel a great mystery. \n(Source: Sentai Filmworks)","show_type":"TV"}];
})();

anime-container-html

<div class="col-md-3 col-xs-6" ng-repeat="anime in animeListCtrl.anime">
    <!-- anime in anime list-->
    <div class="panel panel-default fixed-height highlight" ng-click="animeListCtrl.onSelectAnime(anime)">
        <div class="panel-body">
            <img class="img-rounded img-responsive center-block" ng-src="{{anime.cover_image}}"/>
            <h3> {{anime.title}} </h3>
        </div>
    </div>
</div>

I'm sure there's a pretty simple solution but I only find something that seems using old versions of AngularJS (I'm using 1.2.26).

Thanks everybody!

P.S. any other tip or advice about best practices are welcome!

Answer 1

What you want to do is add a service that you can then inject into your other controllers/directives. In your example, I imagine something like SearchService would work. In your submit function, rather than invoking the API directly have it call into the SearchService to execute the search. The SearchService would then maintain and expose the result set. Any controller and/or directive interested in displaying the results could bind to SearchService.resultSet, for instance.

Remember that Angular services are singleton objects. So if you intend on having more than a single search form/result object you may need to enhance your service to store named searches. However, based on the code you've shown, it looks like a single resultset would suffice. You could, optionally, decorate the ctrl,directive,service as part of an anime-specific module. So instead of SearchService call it AnimeSearchService.

app.factory('AnimeSearchService', function($http) {
  var service = { resultSet: {} };

  service.executeSearch = function(args) { 
    ... some API calls ... 
    // when they return results store them as service.resultSet
  }

  return service;
});

Then in your controller

app.controller('AnimeSearchController', function(AnimeSearchService){

    this.submit = function(srcstr){

        //here I call the API and then I want to update the anime variable in AnimeListController
        AnimeSearchService.executeSearch(srcstr);
        console.log(srcstr);
    }

});

app.controller('AnimeListController', function(AnimeSearchService){

    this.anime = AnimeSearchService.resultSet;     //expose the service to the template (or optionally create a $watch to update)

    this.onSelectAnime = function(anime){
        console.log(anime);
    };
});

UPDATE: Your issue most likely comes down to angular bindings. If you are binding to properties of the service's resultSet object then those bindings will update as those properties change. However, if you are assigning the value of a property to a new property in your own controller/scope then you will have to watch the service and update your controller/scope's copy. Perhaps this fiddle will help explain it better: http://jsfiddle.net/vv3odc7t/1/

There is also this stack overflow question about service binding in general: https://stackoverflow.com/a/23774843/1769529

Hope that helps!