AngularJS Basic debugging in markup


Scope testing & output of model

<div ng-app="demoApp" ng-controller="mainController as ctrl">
        <li ng-repeat="item in ctrl.items">
       {{ctrl.items | json : 2}}

angular.module('demoApp', [])
.controller('mainController', MainController);

function MainController() {
    var vm = this;
    vm.items = [{
        id: 0,
        text: 'first'
        id: 1,
        text: 'second'
        id: 2,
        text: 'third'

Sometimes it can help to see if there is a new scope to fix scoping issues. $scope.$id can be used in an expression everywhere in your markup to see if there is a new $scope.

In the example you can see that outside of the ul-tag is the same scope ($id=2) and inside the ng-repeat there are new child scopes for each iteration.

An output of the model in a pre-tag is useful to see the current data of your model. The json filter creates a nice looking formatted output. The pre-tag is used because inside that tag any new-line character \n will be correctly displayed.