How to debug objects from Angular template (html file)

Issue

Creating a template, I have some Angular code within some HTML elements:

<button id="btnMainMenu" class="button button-icon fa fa-chevron-left header-icon"
        ng-if="(!CoursesVm.showcheckboxes || (CoursesVm.tabSelected == 'current') )"
...

I want to debug the ng-if condition to check the values of my CoursesVm object. How would I do this in Chrome for example?

Solution

For people looking for Angular (2+), use json pipe

for eg:

 <span>{{ CoursesVm | json }}</span> 
 <textarea>{{ CoursesVm | json }}</textarea>

Answered By - santon