title: How to call AngularJS parent directive scope method from child directive
body: <p>I have a parent modal directive with confirm and cancel methods.</p>
  
  <pre><code>        ngDialog.open({
              scope      : true,
              showClose  : false,
              template   : theTemplate,
              className  : 'ngdialog-theme-prompt -small',
  
              controller : ['$scope', function Ctrl($scope) {
                  $scope.message = message;
  
                  $scope.confirm = function(){
                      $scope.closeThisDialog();
                      resolve(true);
                  };
  
                  $scope.cancel = function(){
                      $scope.closeThisDialog();
                      resolve(false);
                  };
              }]
  
          }).closePromise.then(function () {
              resolve(false);
          })
  </code></pre>
  
  <p>The template is another directive.</p>
  
  <pre><code>&lt;form class="edit-stakes-content"&gt;
      &lt;ul&gt;
          &lt;li ng-repeat="stake in settings track by $index"&gt;
              &lt;input type="number" name="input" pattern="^\d+$" min="0" value="{{stake}}" /&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="edit-stakes-control"&gt;
          &lt;button ng-click="cancel();" class="apl-btn apl-btn-link apl-btn-large" translate&gt;CANCEL&lt;/button&gt;
          &lt;button ng-click="confirm();" autofocus="true" class="apl-btn apl-btn-update apl-btn-large" translate&gt;SAVE&lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>In the child directive of the modal i want to be able to perform some validation and POST to the server and then call the parent modal directive confirm or cancel methods.</p>
  
  <p>Similar to this:</p>
  
  <pre><code>Directive.$inject = ['UserSettings'];
  
  function Directive(UserSettings) {
      function Link($scope) {
  
          $scope.settings = angular.copy(UserSettings.get('presetStakeSettings').settings);
  
          $scope.cancel = $scope.$parent.cancel();
  
      }
  
      return {
          'link': Link,
          'restrict': 'E',
          'replace': true,
          'templateUrl': 'betting/edit-stakes/edit-stakes.html'
      }
  }
  </code></pre>
  
  <p>Calling the parent method throws a JavaScript error that $scope.$parent.cancel is not a function yet seems to do the job.</p>
  
  <p>Is there a better way to achieve the child to parent communication without the JavaScript error?</p>