title: AngularJS: function is not a function
body: <p>I have an AngularJS app, and on one of the pages, I have a number of widgets, each one displaying some information about the status of a part of the system.
  I am currently working on adding the functionality to allow the user to 'hide' the heading of a given widget.</p>
  
  <p>There is a 'Settings' button on the page where the widgets are displayed, which, when clicked, overlays a toolbar on top of each of the widgets. The toolbar has a number of buttons- one of which is another 'Settings' button, which opens up a dialog that allows the user to change the settings for that particular widget.</p>
  
  <p>I have added a checkbox to the dialog, to enable the user to 'hide' the heading for that particular widget from view:</p>
  
  <p><a href="https://i.stack.imgur.com/exBhw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/exBhw.png" alt="Configure Item dialog"></a></p>
  
  <p>When the checkbox is selected on the dialog, and the user clicks 'Preview', I am expecting (eventually- I'm still working on the implementation of the feature) the heading for that particular widget to be hidden. However, currently, when the user clicks 'Preview', whether the checkbox is selected or not, I am getting an error in the console that says:</p>
  
  <blockquote>
    <p>TypeError: $scope.widget.toggleWidgetHeading is not a function</p>
  </blockquote>
  
  <p>This error is coming from the <code>$scope.preview</code> function in ctrl.js called when the 'Preview' button is clicked on the dialog:</p>
  
  <pre><code>}).controller('WidgetPickerCtrl', function($scope, $timeout, fxTag, gPresets, appWidget) {
      ...
      $scope.preview = function(e) {
          $scope.widget.toggleWidgetHeading();
          ...
      };
      ...
  });
  </code></pre>
  
  <p>I don't understand why I'm getting this console error, since <code>toggleWidgetHeading()</code> clearly is a function...</p>
  
  <p>If I right-click on the function call above in Sublime, and select 'Go to definition', I am taken to the directive.js file where the function is defined:</p>
  
  <pre><code>.directive('appWidget', function($timeout, fxTag, appColorFilter) {
      return {
          ...
          link: function($scope, $element){
              ...
              var toggleWidgetHeading = function(){
                  ...
              }
              ...
          }
      }
  })
  </code></pre>
  
  <p>Also, clicking the 'Preview' button on the dialog no longer closes the dialog... </p>
  
  <p>Why is it that I'm being told that this function call is not a function when it is clearly defined as one? Is the issue here something to do with the scope (i.e. the fact that I'm calling the function from ctrl.js, even though it's defined in directive.js)?</p>