AngularJS Basic debugging in markup


Example

Scope testing & output of model

<div ng-app="demoApp" ng-controller="mainController as ctrl">
    {{$id}}
    <ul>
        <li ng-repeat="item in ctrl.items">
            {{$id}}<br/>
            {{item.text}}
        </li>
    </ul>
    {{$id}}
    <pre>
       {{ctrl.items | json : 2}}
    </pre>
</div>


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.

demo