how to call controller function on button click when my button is placed in different controller in angularjs

I am new to AngularJS and making a single page application. Please see the attached screen shot I have a dropdown in which there is an apply button and on click of this button I want to call functions that are written in different controller. I have multiple dropdowns on a shell page I am attaching a screen shot of TimeLine dropdown for understanding. There are basically three dropdowns and they are same for every Tab that is why I've placed them in shell page. For example, there is one dropdown that is populating all clients name from database and have checkboxes so when user select multiple checkboxes and click on Apply button the view under these dropdown should be refreshed with new data.

image

// This controller function is used to get data from database and fill the dropdown.

 app.controller("FillDropDownController",function($scope,GetService,$rootScope){

    $rootScope.loading = true;
        // Calling Serivce Method here to get the data and fill dropdown
        $scope.GetDropDownValues = GetService.GetAll("CommonApi", "GetDropDownValues").then(function (d) {
            $scope.GetDropDowns = d;
            $rootScope.loading = false;
        });



// Here goes the function for ng-click = GetSelectedPractices() which gets the selected clients

$scope.GetSelectedPractices = function () { 
        $scope.selectedPractices = []; 
        angular.forEach($rootScope.PracticesList, function (d) { 
            if (d.selected == true) { 
                $scope.selectedClients.push(d.CLIENTNAME); 
            } 
        });  

        $scope.spanValues = $scope.selectedClients; 

    // I am stuck here that how to call controller functions for specific view

    }

    });

Here are two different controller functions (both are updating same view) that are fetching data from database and populate a table or draw a chart based on data. All these controller functions call a generic service to get the data. My problem is that my Apply Button dropdown is placed in shell page becuase if you see image no. 2 there are tabs on the page and this "Timeline" dropdown is same for all Tabs (On click of every tab there is a view loaded and its functions called and display table or draw charts on view).

app.controller("GetChargesController", function ($scope, GetService, $rootScope) {
    $scope.Title = "Charges Details List";
    $rootScope.loading = true;
    // Calling Serivce Method here to get the data
    $scope.GetChargesDetails = GetService.GetAll("CommonApi", "GetChargesDetails").then(function (d) {
        $scope.ChargesDetails = d;
        $rootScope.loading = false;
    });


     });

    app.controller("GetPaymentsController", function ($scope, GetService, $rootScope) {
    $scope.Title = "Payments Details List";
    $rootScope.loading = true;
    // Calling Serivce Method here to get the data
    $scope.GetPaymentsDetails = GetService.GetAll("CommonApi", "GetPaymentsDetails").then(function (d) {
        $scope.PaymentsDetails = d;               
        $rootScope.loading = false;
    });


     });


ANSWERS:


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Sample</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="">
  <script src=""></script>
  <script src=""></script>
<script src=""></script>
</head>
<body ng-app="app">

<div ng-controller="sample1Controller">
   <input type="button" value="Controller1" ng-click="sample1()"/>   
</div>
<div ng-controller="sample2Controller">  
</div>
</body>
<script>
var app=angular.module("app",[]);

app.controller("sample1Controller",["$scope",'$rootScope',function($scope,$rootScope){
$scope.sample1=function(){
$rootScope.$broadcast('message');
}
}]);

app.controller("sample2Controller",["$scope",'$rootScope',function($scope,$rootScope){
$scope.sample2=function(){
console.log('called on click on sample1 button from controller1');
}

$scope.$on('message',function(){ $scope.sample2();});

}]);
</script>
</html>

You could use the controller as vm technique this (in theory) gives you access to the controller in all the child scopes with the name you give to it here is a post about this technique.


from you shell page controller, broadcast the event whenever the filter is applied.

  $rootScope.$broadcast('UPDATE-GRAPH');

In your different tabs controller receive the broadcasted event and perform action based on that.

 $rootScope.$on('UPDATE-GRAPH', function() {

       // call update function of your controller from here

      });

Hello You can directly extend your current controller with base controller so that it will access all function of it.

app.controller("BaseController",function($scope){
  // all functions you willing to call
});

app.controller("ExistingController",function($scope){
  // inherit base controller, using this even though your functions are in base   // controller it will get called
   $controller('BaseController', {$scope: $scope});
});


 MORE:


 ? Why can't I get the attribute value of my custom directive?
 ? Directives callbacks and scope
 ? accessing parent scope inside a directive
 ? Angular's Resource Promise is not re-rendering when data loaded
 ? Can I watch a controller scope property from inside a directive?
 ? ng-repeat in a directive does not update if the data changes
 ? Angularjs Directive-Directive-Controller-Service interaction
 ? How to update data in AngularJS Controllers using $hhtp.get() for the second time without reloading the page
 ? Modify $rootscope property from different controllers
 ? Two-way binding faulty when used with a popup directive