Debugging Angular expressions in chrome console

gistfile1.md

Inline expressions sort of suck because they're hard to debug... if you end up with a really long, unweildy filter, here's a way to debug them in the browser console.

ex. of lengthy expression:

<tr id="element" ng-repeat="resource in alertingEnvironment.environment.database_services.resources | map:'servers.resources' | flatten | unique:'id' | concat: alertingEnvironment.environment.servers.resources">
</tr>

function $eval(expr) {
  return angular.element("#element").scope().$eval(expr);
}
$eval("resource in alertingEnvironment.environment.database_services.resources | map:'servers.resources' | flatten | unique:'id' | concat: alertingEnvironment.environment.servers.resources");

Tip: In chrome, you can simply click on the element you want and select "Copy CSS Path".

xample.gif