title: How can I tell what is calling one of my scope functions in angular?
body: <p>I have a directive that has a template such as:</p>
  
  <pre><code>&lt;div ng-show="isVisible()"&gt; ... &lt;/div&gt;
  </code></pre>
  
  <p>I've changed isVisible so it now simply returns true and does a console.log.</p>
  
  <p>This directive is included a single time on my page, yet the log occurs 50+ times. I want to know what code is calling isVisible so many times. Is there any way to trace what is calling a function? The ACTUAL stack trace is completely useless, because angular appears to hide everything.
  Is there some tool to figure out what non-angular code triggered a function call.</p>
  
  <p>In some other cases I have data changing and I can't find where it's changing [it's not actually my code] and because the original code is in angular, I can't just use stack traces, or use watches or do my normal type of debugging.</p>
  
  <p>here is the directive:</p>
  
  <pre><code>require('app').directive('kmFormLanguages', ["$q", function ($q) 
  {
    return {
      restrict: 'EAC',
      template: '&lt;span ng-show="isVisible()"&gt;&lt;span km-select multiple ng-model="binding" binding-type="string" placeholder="Available Languages" items="locales|orderBy:\'name\'" minimum="1"&gt;&lt;/span&gt;&lt;/span&gt;',
      transclude: true,
      scope: {
        binding : '=ngModel',
      },   
      controller: ["$scope", "IStorage", "editFormUtility", function ($scope, storage, editFormUtility) {
  
        $scope.locales = [
          {identifier:"ar", name:"Arabic"  },   
          {identifier:"en", name:"English" }, 
          {identifier:"es", name:"Spanish" }, 
          {identifier:"fr", name:"French"  },   
          {identifier:"ru", name:"Russian" }, 
          {identifier:"zh", name:"Chinese" }
        ];   
  
        $scope.isVisible = function() {
          console.log('binding: ', $scope.binding);
          debugger;
          return $scope.binding!==undefined &amp;&amp; $scope.binding!==null;
        }    
      }]   
    };
  }])
  </code></pre>
  
  <p>and the html which uses it (no angular controls that are ancestors are shown):</p>
  
  <pre><code>&lt;div ng-controller="editMeasure"&gt;
      [...]
      &lt;div ng-show="!isLoading() &amp;&amp; status!='hidden'"&gt;
          [...]
          &lt;span km-form-languages ng-model="document.header.languages"&gt;&lt;/span&gt;
  </code></pre>