title: How to call a function inside a controller in a directive on ng-click
body: <p>I have the following directive designed to call a modal dialog on button click:</p>
  
  <pre><code>.directive('myModal', function () {                         
          return {
              restrict: 'E',
              scope: { show : '='},
              replace:true,                                                   
              transclude: true,                                               
              controller: function($scope, $filter,spService, spHelper, itemContainer) {
                  $scope.toggleModal = function() {
                      $scope.convertArray();
  
                      $scope.modalShown = !$scope.modalShown;
                      $scope.currentQuestionIndex = 0;                                // initialize question index
                      $scope.answerCollection = [];                                   // initialize collection
                      $scope.answerCollection .value = null;
                      $scope.choicesSelected = "";                                    //  initialize for validation
  
                      $scope.currentQuestionObject = $scope.wizardQuestionSet[0];             //  start from question #1
                  };
  
              // lots more functions here...
         },
         link: function(scope, element, attrs) {
                  scope.dialogStyle = {};
  
                  if (attrs.width) {
                      scope.dialogStyle.width = "640px";
                  }
  
                  if (attrs.height) {
                      scope.dialogStyle.height = "660px";
                  } 
  
                  scope.hideModal = function () { 
                      scope.show = false;
                  };
  
              },
              template:'&lt;div class=\"ng-modal\" ng-show=\'show\'&gt;' + 
                             '&lt;div class=\"ngdialog-overlay\" ng-click=\'hideModal()\'&gt;&lt;/div&gt;' +
                            '&lt;div class=\"ng-modal-dialog\" ng-style=\'dialogStyle\'&gt;' + 
                               '&lt;div class=\"ng-modal-close\" ng-click=\'hideModal()\'&gt;X&lt;/div&gt;' +
                               '&lt;div class=\"ng-modal-dialog-content\" ng-transclude&gt;&lt;/div&gt;' + 
                          '&lt;/div&gt;' + 
                       '&lt;/div&gt;' 
          };
  </code></pre>
  
  <p>And in my HTML, I have the following button designed to call toggleModal() on ng-click:</p>
  
  <pre><code>&lt;div class="expandStory" style="float:left;padding-right:10px;"&gt;
      &lt;span ng-click="$scope.toggleModal()" class="carousel-btns"&gt;
            Call my Modal
     &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried calling toggleModal() using this approach to no avail. Am I missing something here?</p>
  
  <p>Any help would be appreciated.</p>
  
  <p>Thank you as always for the tips. :)</p>
  
  <p><strong>EDIT:</strong> @developer033, I'm calling the directive in my HTML like this:</p>
  
  <pre><code>&lt;my-modal show="carousel.modalShown" width="750px" height="auto"&gt;
      &lt;!-- do something --&gt;
  &lt;/my-modal&gt;
  </code></pre>