Angular Zen
The controller is as follows:
var WorldCtrl = function ($scope) {
$scope.population = 7000;
$scope.countries = [
{name: 'France', population: 63.1},
{name: 'United Kingdom', population: 61.8},
];
};And the markup fragment looks in the following manner:
<ul ng-controller="WorldCtrl">
<li ng-repeat="country in countries">
{{country.name}} has population of {{country.population}}
</li>
<hr>
World's population: {{population}} millions
</ul>The ng-repeat directive allows us to iterate over a collection of countries and
create new DOM elements for each item in a collection. The syntax of the ng-repeat
directive should be easy to follow; a new variable country is created for each item
and exposed on a $scope to be rendered by a view.
But there is a problem here, that is, a new variable needs to be exposed on a $scope
for each country and we can't simply override previously exposed values. AngularJS
solves this problem by creating a new scope for each element in a collection. Newly
created scopes will form a hierarchy closely matching the DOM tree structure, and we
can visualize this by using the excellent Batarang extension for Chrome as shown in
the following screenshot: