I am using this code snippet from official site:\[code\]<a ng-click="items.push(true)">Add Item</a><ul> <li ng-repeat="item in items" ui-animate>{{item}}</li></ul>\[/code\]along with style:\[code\]<style>li { transition: all 0.5s ease; -o-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; background: lightblue; max-height: 50px; /* 1000px works too */ overflow: hidden; padding: 5px;}/* The 'hidden' state to transition from & to */li.ui-animate { opacity: 0; max-height: 0; padding: 0 5px;}</style>\[/code\]Now I tried to use it for my more complex tree:\[code\]<div> <script type="text/ng-template" id="tree_item_renderer.html"> <button class="btn btn-primary" ng-click="add(data)">{{data.name}}</button> <ul> <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'" ui-animate></li> </ul></script><ul ng-app="Application" ng-controller="TreeController"> <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'" ui-animate></li></ul>\[/code\]What happens is that after I click the button, GET method is called on REST API and I receive new nodes that are under the ROOT. However as nicely as it works(the animation), in my sollution it only enlarges a little as shown on picture below and doesn't get bigger with clicking deeper.
Any ideas how to make it work?