AngularJS: how to build nested divs? - angularjs

Question

How can I build the following structure using ng-repeat? Solution must support an arbitrary depth...
I've played with ng-repeat-start & ng-repeat-end but without any luck so far. Any hint is greatly appriciated
<div>1
<div>2
<div>3</div>
</div>
</div>

Answer 1

It can be accomplished through a directive that leverages ng-repeat to render values from nested objects. See it working here.
Directive
app.directive('divRepeater', function($compile) {
return {
restrict: 'E',
replace: true,
template: '<ul></ul>',
scope: {
obj: '='
},
link: function(scope, element) {
var el = angular.element('<span/>');
el.append('<li>' + scope.obj.id + '</li>');
if (scope.obj.nestedObjs) {
var nestedObjs = angular.toJson(scope.obj.nestedObjs);
/// remove quotes from property names
nestedObjs = nestedObjs.replace(/\"([^(\")"]+)\":/g, "$1:");
var nestedDir = "<div ng-init='nestedObjs=" + nestedObjs + "'><div-repeater ng-repeat='nestedObj in nestedObjs track by $index' obj='nestedObj'></div-repeater></div>";
el.append(nestedDir);
}
$compile(el)(scope);
element.append(el);
}
};
});
Controller
app.controller('MainCtrl', function($scope) {
$scope.objs = [{
id: '1',
nestedObjs: [{
id: 'a'
}, {
id: 'b',
nestedObjs: [{
id: 'i'
}, {
id: 'ii'
}]
}]
}, {
id: '2'
}, {
id: '3',
nestedObjs: [{
id: 'a',
nestedObjs: [{
id: 'i'
}]
}, {
id: 'b',
nestedObjs: [{
id: 'i'
}, {
id: 'ii'
}]
}]
}];
});
Markup
<div-repeater ng-repeat="obj in objs track by $index" obj="obj"></div-repeater>