title: How do you fire a button click that does different things based on which Controller is on the view?
body: <p><strong>QUESTION</strong></p>
  
  <p>How do you fire a button click that does different things based on which Controller is on the view?</p>
  
  <p><strong>SITUATION</strong></p>
  
  <p>Below I have two directives/controllers that share the same template view. All the data is rendering correctly - the <code>ng-click="{{::vm.action}}"</code> however doesn't do anything on click. If I change the syntax to <code>ng-click="{{::vm.action()}}"</code> ... the code breaks for view.</p>
  
  <p><strong>CODE</strong></p>
  
  <p><strong>main.html</strong></p>
  
  <pre><code>&lt;confirm-modal&gt;&lt;/confirm-modal&gt;
  
  &lt;error-modal&gt;&lt;/error-modal&gt;
  </code></pre>
  
  <p><strong>modal.html:</strong></p>
  
  <pre><code>&lt;article&gt;
      &lt;h1&gt;{{::title}}&lt;/h1&gt;
      &lt;p&gt;{{::body}}&lt;/p&gt;
      &lt;button ng-click="{{::action}}"&gt;{{::button}}&lt;/button&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p><strong>confirm-modal.directive.js (and controller)</strong></p>
  
  <pre><code>angular
    .module('common.modal')
    .controller('ConfirmModalController', ConfirmModalController)
    .directive('confirmModal', confirmModal);
  
  /* @ngInject */
  function confirmModal() {
  
    var directive = {
      templateUrl: 'app/widgets/modals/modal.html',
      restrict: 'E',
      controller: ConfirmModalController,
      controllerAs: 'vm',
      bindToController: true
    };
  
    return directive;
  }
  
  function ConfirmModalController(modalService) {
  
    var vm = this;
  
    vm.title = 'Confirm Your Subscription';
  
    vm.body = '$8.99 per month will be billed to your account.';
  
    vm.button = 'Subscribe';
  
    vm.action = function () {
      console.log('confirm subscription');
      modalService.confirmSubscription();
    };
  
  }
  </code></pre>
  
  <p><strong>error-modal.directive.js (and controller)</strong></p>
  
  <pre><code>angular
    .module('common.modal')
    .controller('ErrorModalController', ErrorModalController)
    .directive('errorModal', errorModal);
  
  /* @ngInject */
  function errorModal() {
    var directive = {
      templateUrl: 'app/widgets/modals/modal.html',
      restrict: 'E',
      controller: ErrorModalController,
      controllerAs: 'vm',
      bindToController: true
    };
  
    return directive;
  }
  
  function ErrorModalController(modalService) {
  
    var vm = this;
  
    vm.title = 'There was an error with your request';
  
    vm.body = 'Please contact administrator regarding this error';
  
    vm.button = 'Dismiss';
  
    vm.action = function () {
      console.log('error on subscription');
      modalService.closeAllModals();
    };
  }
  </code></pre>