call AngularJs first controller method from second controller

Question

I have two AngularJs Controllers called "HomeController" and "VacancyController". My HomeController have method getallData(). Below I am trying to call Homecontroller's getallData() function through ng-change event of the dropdown. Please advise how do I call getallData() functiona as my dropdown on-change attribute is wrapped around "VacancyController"?

Below is my code:

HTML

<div ng-controller="VacancyController">

<p>Select a Vacancy:</p>
<select ng-model="selectedVacancy" ng-options="x.name for x in vacancieslist" ng-change=""></select>
<h1>Your selected Vacancy Title is : {{selectedVacancy.name}}</h1>

HomeController

.controller('HomeController', function ($scope, angularSlideOutPanel, $http, $location, $window) {
getallData();



//******=========Get All Teachers=========******  
function getallData() {
    $http({
        method: 'GET',
        url: '/Home/GetAllData'
    }).then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
        $scope.ListTeachers = response.data;
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
        $scope.errors = [];
        $scope.message = 'Unexpected Error while saving data!!';
        console.log($scope.message);
    });
};

VacancyController

    app.controller('VacancyController', ['$scope', 'VacancyService', function ($scope, VacancyService) {
    $scope.GetVacancies = function () {
        $scope.vacancieslist = [];

        var getData = VacancyService.Vacancies();
        getData.then(function (ord) {
            angular.forEach(ord.data, function (val) {
                if ($.trim(val).length > 0) {
                    var obj = new Object();
                    obj.name = val.VacTitle;
                    obj.id = val.VacNo;
                    if (val.VacNo > 0) {
                        $scope.vacancieslist.push(obj);
                    }
                }
            });
        }, function () {
            genericService.warningNotify("Error in getting List of Vacancies");
        });
    }

    $scope.GetVacancies();
}]);

Possible duplicate of [What's the correct way to communicate between controllers in AngularJS?](http://stackoverflow.com/questions/11252780/whats-the-correct-way-to-communicate-between-controllers-in-angularjs) — Mike Cheel, May 16 '17 at 15:15

score 0 · Accepted Answer · answered May 16 '17 at 15:31

It is possible for one controller to call another controller, as shown in the following stack overflow(Can one controller call another?). You can use emit or broadcast depending on whether they are a child of another. However in your case, it is better for getAllData to be placed in a service. The service would return the result of getAllData. In the service you can then either always return the result of getAllData from a http call, or cache the service (by setting it to a variable and returning it)

app.service('commonSvc', function() {
  var getAllData = function{... //what you have in your code}
  return {
    getAllData:getAllData
  }
}

By having this commonSvc, you can inject and invoke this service each time you need to call this function, similar to what you are doing for VacancyService. Keep in mind, all service in Angular are singletons. In vacancyController you can then introduce a new function onChange which calls commonSvc.getAllData.

I have created as a service and have updated my HomeController to call my service to getallData() However now my question is how do I call my service from ng-change? — User, May 17 '17 at 10:06
ShK, you need to attach a function in your controller. //vacancyController.js $scope.onChange = function() { commonSvc.getAllData() .then(function() { //execute update function }) .catch(function(){}) } //in your html — jeanli, May 18 '17 at 22:55

call AngularJs first controller method from second controller

1 Answers1