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.
