Animate children of ng-repeat using | AngularJS, ngAnimate

Question

The only answer related I could find was this but I found no comfort in the answer. I'm trying to animate the child of an ng-repeat group of elements but failing miserably, tried various combinations of ng-enter ng-enter-actives etc but cant seem to get my desired effect.

html:

<div ng-repeat="ex in [1,2,3,4]" class="outer">
    <div class="inner"></div>
</div>

css

 .inner{
        transition:1s linear all;
    }
    .outer.ng-enter .inner{
        width:1px;
    }
    .outer.ng-enter-active .inner{
        width:100px;
    }
    .outer.ng-active .inner{
        width:100px;
    }

I'm just trying to get the child of ng-repeat to animate on load. Here is a fiddle I'd appreciate any help.

Answer 1

You can do it with a directive:

myApp.directive('animm',function($timeout){
    return {
        link: function(scope, el, attrs){
            $timeout(function(){
                el.addClass('readyy');
            }, 100);
        }
    };
});

CSS:

.inner{
    transition:1s linear all;
    width: 20px;
    height:20px;
    background-color:red;
}
.outer.readyy .inner{
    width:100px;
}

Could even do some trickery with the scope id to offset them? See fiddle update

http://jsfiddle.net/j0p3r495/5/