title: How do I debug/dump a value from an ng-bind {{ }} Angular expression?
body: <p>Is there a good way to dump or inspect the results of an expression?  Sometimes when I do</p>
  
  <pre><code>{{some_expression}}
  </code></pre>
  
  <p>, nothing shows up on the page where the result of that expression should show up.  How do I determine if the expression returned a <code>null</code>, an <code>undefined</code>, or an empty string <code>''</code>?</p>
  
  <p>If  it's a normal object, like this, it will show a nice programmer-friendly representation of the object, which is great:</p>
  
  <pre><code>{{ {'a': 1} }}
  </code></pre>
  
  <p>But if you try to inspect an expression that evaluates to null, undefined, or '', they are all <strong>indistinguishable from each other</strong>!</p>
  
  <pre><code>{{null}}
  {{undefined}}
  {{''}}
  </code></pre>
  
  <p>So how can you tell which one it was??</p>
  
  <p>I tried using <code>JSON.stringify</code>:</p>
  
  <pre><code>{{ JSON.stringify(null) }}
  </code></pre>
  
  <p>but <code>JSON</code> seems to be unavailable from an Angular expression because it's a method from <code>window</code> and not a property of the scope (see <a href="https://stackoverflow.com/questions/22852388/how-do-i-access-object-keysobject-length-from-a-directive-template">related question about accessing methods from window</a>).</p>
  
  <p>I tried using <code>typeof</code>:</p>
  
  <pre><code>typeof {}: {{ typeof {'a': 1} }}
  </code></pre>
  
  <p>but it results in an error:</p>
  
  <pre><code>Error: [$parse:syntax] Syntax Error: Token '{' is an unexpected token at column 9 of the expression [ typeof {'a': 1} ] starting at [{'a': 1} ].
  </code></pre>
  
  <p>So how can I get it to dump the value into the template using something like <code>JSON.stringify</code> (… or <code>console.log</code>)?</p>
  
  <hr>
  
  <p>Generally speaking, is there a good way to debug Angular expressions other than trial and error?  Since Angular <a href="http://docs.angularjs.org/guide/expression" rel="noreferrer">expressions</a> are so "forgiving", they don't seem to raise errors; they just silently swallow the errors and return <code>undefined</code>:</p>
  
  <blockquote>
    <p>In JavaScript, trying to evaluate undefined properties generates
    ReferenceError or TypeError. In Angular, expression evaluation is
    forgiving to undefined and null.</p>
  </blockquote>
  
  <p>But without seeing some kind of error message, how do you know what part of the expression Angular had trouble with?  </p>