How to call multiple functions / chain of calls using ng-click

Technically, you could write inline on the condition that it changeColor

returns a promise and your service call should return a promise (which is better compared to the traditional looping around callbacks).

First change your service to return a promise like: -

 function configuratorService($http){
      this.addOption = function(modelCode, colorCode){
          return $http.post("Addoption", {modelCode:modelCode, colorCode:colorCode})
                 .then(function(response){ 
                   //logic to get configuration or whatever
                   return response.data
          });
     }
  }

      

        
        
        
      

    

In ColorsCtrl:

$scope.changeColor = function(newColorCode){
     //return promise   
    return configuratorService.addOption($scope.modelCode, newColorCode)
         .then( function(configuration){
            $scope.configuration = configuration;     
            /*You could even return the data by doing the following*/          
            //return $scope.configuration = configuration;
        });
    }
 }

      

        
        
        
      

    

In HeaderCtrl:

$scope.updateDetails = function(){//<-- if you are returning data from changeColor you could even use it here
    $scope.summaryDetails = getSummaryDetails();
}

      

        
        
        
      

    

and finally in your opinion:

ng-click="changeColor(color.code).then(updateDetails)"

      

        
        
        
      

    

Demo example

angular.module('app', []).controller('HeaderCtrl', function($scope) {
  $scope.updateDetails = function() {
    //check the console
    console.log('UpdateDetails');
    $scope.summaryDetails = "Summary Details after option changeColor";
  }
}).controller('ColorsCtrl', function($scope, configuratorService) {
  $scope.changeColor = function(newColorCode) {
    //swap previous selected color with new
    return configuratorService.addOption().then(function(configuration) {
      //check the console
      console.log('Option Added');
      $scope.configuration = configuration;
    });
  }
}).service('configuratorService', function($timeout) {
  this.addOption = function() {
    //Justa proxy for an ansyn operation and return call
    return $timeout(function() {
      return "Color Updated"
    }, 1000);
  }
});
      

        
        
        
      

    

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">

  <div ng-controller="ColorsCtrl">
    <div ng-controller="HeaderCtrl">

      <button ng-click="changeColor().then(updateDetails)">Update</button>
      {{summaryDetails}}
    </div>
  </div>
      

        
        
        
      

    

There are many other options and better ways to do this. One is presented in TymeJV's answer: The problem is that your controllers are tightly coupled and can affect reuse, and you will need to do additional layouts to add a non-existent method updateDetails

during testing ColorsCtrl

.

Although this approach in my answer has its own problem, because now your opinion should know something (that the method returns a promise) that it shouldn't. There are other ways to better deal with this scenario, one simple approach is to use eventing or the pub / sub pattern that notifies another controller that something has happened here, do whatever you want to do. This design will make it more loosely coupled and more reusable and testable.

You can only use the angular event bus like $ broadcast or $ emit as applicable, combined with $ on to accomplish this task, or you can create a pub / sub design .

With a simple event, you simply do the following: -

In ColorsCtrl:

    $scope.changeColor = function(newColorCode){
        configuratorService.addOption($scope.modelCode, newColorCode, function(configuration){
            $scope.configuration = configuration;
            //BroadCast an event, this will notify any child scopes that has subscribed to this event.   
            $scope.$broadCast("Configuration_Udpated");                           
          });
       }
   }

      

        
        
        
      

    

In HeaderCtrl, subscribe to the event and register the updateDetails method:

//....
$scope.updateDetails = function(){
    $scope.summaryDetails = getSummaryDetails();
}


//...
$scope.$on("Configuration_Udpated", $scope.updateDetails)

      

        
        
        
      

    

Note: - Try using promises rather than passing callbacks to the service. You can find many articles online regarding promise templates .