Getting Data From Another AngularJS Controller

Question

So I'm still very new to developing in Ionic/Cordova/AngularJS.

Right now I have 2 controllers, "groups" and "events". My goal is to create a group and to create an event on seperate pages. Once a group is created, I want users to be able to select this group in their "create event" screen. However, I just can't get my groups to show up. I thought a simple ng-controller option in my HTML option field would do it but that doesn't seem to be possible. I tried putting everything in the same controller and that works, but that easily becomes very chaotic. Would anyone be able to tell me how I can achieve this? Thanks!

<label class="item item-input item-select">
                    <div class="input-label">
                        Group
                    </div>
                        <select ng-model="event.groupname"> <!-- this is in my eventscontroller-->
                            <option ng-repeat="group in groups">{{group.name}}</option> <!-- these groups are in GroupsController, this doesn't work -->
                        </select>
                </label>

Have you considered using a angular service or factory to share information between the controllers? — taguenizy, Sep 14 '16 at 08:30
Possible duplicate of [Can one controller call another?](http://stackoverflow.com/questions/9293423/can-one-controller-call-another) — BanksySan, Dec 09 '16 at 14:15

score 0 · Answer 1 · answered Sep 14 '16 at 08:34

have you tried to name the controllers and call them by the name?

<label class="item item-input item-select" data-ng-controller="events as eventsCtrl" >
    <div class="input-label">
         Group
    </div>
    <select ng-model="eventsCtrl.groupname" data-ng-controller="groups as groupsCtrl" > <!-- this is in my eventscontroller-->
         <option ng-repeat="group in groupsCtrl.groups">{{group.name}}</option><!-- these groups are in GroupsController, this doesn't work -->
    </select>
</label>

score 0 · Answer 2 · answered Sep 14 '16 at 08:43

If you want to use list of groups created in users controller, then its quite simple...just add each group in a rootScope array. Something like

$rootScope.groupList = []
$rootScope.groupList.push($scope.group) //assuming $scope.group is where use save single group data

Now you can access $rootScope.groupList in any controller and get list groups in any controller by accessing

$rootScope.groupList

but using rootScope is not very good practice. Best way to share data between controllers is services but if you are new to Angular then you can go for rootScope for now but again services are the best way to go for data sharing between multiple controllers.

score 0 · Answer 3 · answered Sep 14 '16 at 11:24

You can use a service to share data between your controllers. Services provide an easy way for us to share data and functionality throughout our app.

I'd recommend you to go through this article on how to share data between controllers in AngularJS.

Here is the implementation you can try

<!-- SharedService -->
<script type="text/javascript"> 
    angular.module('myApp')
    .service('SharedService', [function () {
        var main = {};
        main.eventGroupName = '';

        main.getEventGroupName = function(){
            return main.eventGroupName;
        };
        main.setEventGroupName = function(groupName){
            main.eventGroupName = groupName;
        };

        return main;    
    }]);
</script>

<!-- GroupsController -->
<script type="text/javascript"> 
    angular.module('myApp')
    .controller('GroupsController', ['$scope', 'sharedService', function ($scope, SharedService) {
        $scope.event.groupname = SharedService.getEventGroupName();
        // Remaining code for GroupsController
        //
        //
    }]);
</script>

<!-- Eventscontroller -->
<script type="text/javascript"> 
    angular.module('myApp')
    .controller('EventsController', ['$scope', 'sharedService', function ($scope, SharedService) {
        var groupName = 'Another name';
        SharedService.setEventGroupName(groupName);
        // Remaining code for Eventscontroller
        //
        //
    }]);
</script>

<!-- View -->
<label ng-controller="GroupsController" class="item item-input item-select">
    <div class="input-label">
        Group
    </div>
        <select ng-model="event.groupname"> <!-- this is in my EventsController-->
            <option ng-repeat="group in groups">{{group.name}}</option> <!-- these groups are in GroupsController, this doesn't work -->
        </select>
</label>

Getting Data From Another AngularJS Controller

3 Answers3

Linked