title: AngularJS $watch unbind function is not defined when being called only
body: <p>I am building a user session activity timer using AngularJS 1.6. I am using $scope.$watch to monitor the value of a countdown timer. This works for the most part although $watch is binding to the variable multiple times, every time the session timer function is called. To solve this, I think I need to simply unbind the watcher if it is already defined.</p>
  
  <p>I saw some very simple examples on how to do this on SO, however nothing seems to be working. The $scope.$watch method returns a function that when called, unbinds the watcher.</p>
  
  <p>However, anytime the unbind function is called, there is an error in the console.log 'ReferenceError: sessionWatchUnbind is not defined'. This seems very strange because the undefined error is happening within an IF statement that checks if the function is defined before calling it. How could it be defined and then undefined immediately after?</p>
  
  <pre><code>// If session countdown watch is already set unbind it to prevent multiple watches on the same value
  if (sessionWatchUnbind) {
    console.log('sessionWatchUnbind ', sessionWatchUnbind); // This prints the function definition to the console log properly
    sessionWatchUnbind(); // This line throws an error 'ReferenceError: sessionWatchUnbind is not defined' but it was defined in the previous lines!?
  }
  
  // Set a watcher on session countdown value
  sessionWatchUnbind = $scope.$watch('session_countdown', function (newValue, oldValue) {
    if (newValue !== oldValue) {
  
      // continued...
    }
  });
  </code></pre>
  
  <p>Also, the same error happens if I try placing the call inside the body of the watcher as such.</p>
  
  <pre><code>// Set a watcher on session countdown value
  sessionWatchUnbind = $scope.$watch('session_countdown', function (newValue, oldValue) {
    if (newValue !== oldValue) {
      sessionWatchUnbind(); // This line throws an error ReferenceError: sessionWatchUnbind is not defined
      // continued...
    }
  });
  </code></pre>
  
  <p>I am pretty sure my code is following the numerous examples on how to do this. Perhaps someone could point me in the right direction!</p>
  
  <p>UPDATE:
  I got this to work by binding sessionWatchUnbind to 'this'. Perhaps because the outer wrapper function is bound to 'this' as well. This solution was based on the accepted answer here: <a href="https://stackoverflow.com/questions/30189361/how-to-prevent-unbind-previous-watch-in-angularjs">How to prevent/unbind previous $watch in angularjs</a></p>
  
  <pre><code>    vm = this;
  
      vm.startActivity = function () {
  
      // If session countdown watch is already set unbind it to prevent multiple watches on the same value
      if (vm.sessionWatchUnbind) {
        vm.sessionWatchUnbind();
      }
  
      // Set a watcher on session countdown value
      vm.sessionWatchUnbind = $scope.$watch('session_countdown', function (newValue, oldValue) {
        console.log('sessionWatchUnbind newValue, oldValue ', newValue, oldValue);
        if (newValue !== oldValue) {
            //continued...
        }
      });
  </code></pre>