Angular-JS: ng-repeat multiple times without having a nested structure - angularjs

Question

Is there a way for me to do a nested ng-repeat call, but not having it create a nested structure.
I.e.
Say I have this in my script:
$scope.animals = {
dog : {
rupert: {
size: 'big'
}
},
cat : {
jon: {
size: 'small'
},
don: {
size: 'small'
}
},
pig : {
mike: {
size: 'big'
}
}
}
and this in my html
<ul>
<ul ng-repeat="(type,animal) in animals">
<li ng-repeat="(name,description) in animal">
<span>
This is {{name}} the {{type}}, he is really {{description.size}}.
</span>
</li>
</ul>
</ul>
Here is a plunkr : http://plnkr.co/edit/BtAIejohzzVjrwWDfBWK?p=preview
Basically at the moment this creates something like this:
<ul>
<ul>
<li>
<span>
This is don the cat, he is really small.
</span>
</li>
<li>
<span>
This is jon the cat, he is really small.
</span>
</li>
</ul>
<ul>
<li>
<span>
This is rupert the dog, he is really big.
</span>
</li>
</ul>
<ul>
<li>
<span>
This is mike the pig, he is really big.
</span>
</li>
</ul>
</ul>
I'd like it to make something like this:
<ul>
<li>
<span>
This is don the cat, he is really small.
</span>
</li>
<li>
<span>
This is jon the cat, he is really small.
</span>
</li>
<li>
<span>
This is rupert the dog, he is really big.
</span>
</li>
<li>
<span>
This is mike the pig, he is really big.
</span>
</li>
</ul>
So is there a way to formulate this to get this result, do something of this sort (this doesn't work lol)
<ul>
<ng-repeat="(type,animal) in animals">
<li ng-repeat="(name,description) in animal">
<span>
This is {{name}} the {{type}}, he is really {{description.size}}.
</span>
</li>
</ng-repeat>
</ul>
*note I'd like to avoid doing this
<ul>
<li ng-repeat="(name,description) in animals.dog">
<span>
This is {{name}} the dog, he is really {{description.size}}.
</span>
</li>
<li ng-repeat="(name,description) in animals.cat">
<span>
This is {{name}} the cat, he is really {{description.size}}.
</span>
</li>
<li ng-repeat="(name,description) in animals.pig">
<span>
This is {{name}} the pig, he is really {{description.size}}.
</span>
</li>
</ul>

Answer 1

You could probably create a couple of dummy ng-repeat-start/ng-repeat-end directives for the top level repeater.
<ul>
<!-- Remove it with an ng-if -->
<li ng-repeat-start="(type,animal) in animals" ng-if="0"></li>
<!-- Or do -->
<!-- <li ng-repeat-start="(type,animal) in animals" ng-if="::type<0"></li> -->
<li ng-repeat="(name,description) in animal">
<span>
This is {{name}} the {{type}}, he is really {{description.size}}.
</span>
</li>
<!-- Remove it with an ng-if -->
<li ng-repeat-end ng-if="0"></li>
<!-- Or do -->
<!-- <li ng-repeat-end ng-if="::type<0"></li> -->
</ul>
Plnkr