AngularJS Invoke method in another controller

Question

To simplify it. I have 3 tabs with lists of items. (Country, City, Stree). In my app those are diferent things but this is to simplyfy it.

In those 3 tabs I'm listing all the countes, cities and streets. I have seperate controller for each tab. CountryController, CityController and StreetController.

What I want to achieve. When users clicks on country in first tab I wast to invoke function in CitiesControlelr that will return all the cities in given country. When your clicks on City I want to invoke function in StreetController that will return all the streets in that city.

How to achieve this "communication" between controllers? What is proper way of making it?

score 0 · Answer 1 · answered Dec 21 '14 at 14:51

You could put an object in a scope that is parent to all of your controllers' scopes to store the selected values.

<div ng-init="current = {}">
    <div ng-controller="CountryController as countryCtrl">
        <select ng-options="country.code as country.label for country in countryCtrl.countries" 
                ng-model="current.country">
        </select>
    </div>
    <div ng-controller="CityController as cityCtrl">
        <select ng-options="city.code as city.label for city in cityCtrl.countriesFor(current.country)"
                ng-model="current.city">
        </selected>
    </div>

</div>

AngularJS Invoke method in another controller

1 Answers1