AngularJS ng-init example
HTML
<div ng-app="" ng-controller="Ctrl">
<script type="text/ng-template" id="package.tmpl">
<li><input type="checkbox" checked="checked"/>
<label ng-init="showexp=true" ng-click="showexp = !showexp" title="{{pkg.description}}">{{pkg.title}}</label>
<div ng-show="showexp">{{pkg.explanation}}</div>
</li>
<ul>
<ng-include src="'package.tmpl'" ng-repeat="pkg in pkg.children" />
</ul>
</script>
<ul>
<ng-include src="'package.tmpl'" ng-repeat="pkg in model.children"/>
</ul>
</div>
CSS
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<style>
.ng-invalid { border: 1px solid red; }
JavaScript
function Ctrl($scope) {
$scope.model = {
children : [ {
title: "Click me first",explanation: "I'm pretty",
children: [
{ title: "no, click me", explanation: "I'm prettier", children: [] },
{ title: "here, click me", explanation: "Duh!", children: [] }
]
}]};
}