title: strange behavior when debugging angularjs directives with lexical scoping (closure) in chrome dev tools
body: <p>This is my code with a simple directive called test:</p>
  
  <pre><code>var app =  angular.module("app",[]);
  
  app.directive('test',function(){
     return {
        link(scope,el,attrs){
          var outerVar = 'im in the outer scope';
  
          var myFunc = function(){
             var someText = 'just to be able to put a breakpoint here';
          }
  
          myFunc();
  
        }
     }
  });
  </code></pre>
  
  <p>I added breakpoint at var someText. Then I tried to get the value from the dev tools console by typing in outerVar in I'm getting "ReferenceError: outerVar is not defined".</p>
  
  <p>But when I modify myFunc as</p>
  
  <pre><code>var myfuction(){
   console.log(outerVar);
  };
  </code></pre>
  
  <p>I'm getting the value and even more I can output the value from outVar on the dev tools console but only the outVar but not the outer variable like scope, el, and attrs ... and again if I do the a console.log for the other variables I get the same results -- it works, but not in the dev tools console.</p>