AngularJS animating by dynamic div height which is determined by incoming json request data (eg number of of posts/comments which fill the div)

Question

My animation service is supposed to slide a div into view, for it to look nice I need to get the divs height after it gets populated with data from the json request (a list of comments), initially the div is empty and has no height.

The animation is called from a function inside a directive, the process is supposed to go as follows:

• User clicks load comments button
• Directive function "loadComments" runs
• After the json request has got the comments data, $animate.addClass(commentBox, "comments-slider"); is called (commentBox is the element). The animation call is inside the promise after the comment array is filled with the requestData.

The problem is that the animation is not being run the first time, when logging the offsetHeight value in the directive it's displaying 0. The div's height value does not appear to be getting updated in sync (after the comments array is populated).

animation service:

moduleName.animation('.comments-slider', function() {
        return {
            beforeAddClass : function(element, className, done) {
                var commentsHeight = element[0].offsetHeight;
                element.css({
                    '-webkit-transition': 'all 3s linear',
                    'margin-top': '-' + commentsHeight + 'px',
                    'opacity': '0'
                })
                done();
            },
            addClass : function(element, className, done) {
                element.css({
                    'margin-top': '0px',
                    'opacity': '1'
                })
                done();
            },
            beforeRemoveClass : function(element, className, done) {
                element.css({
                    '-webkit-transition': 'all 3s linear',
                    'margin-top': '0px',
                    'opacity': '1'
                })
                done();
            },
            removeClass : function(element, className, done) {
                var commentsHeight = element[0].offsetHeight;
                element.css({
                    'margin-top': '-' + commentsHeight + 'px',
                    'opacity': '0'
                })
                done();
            }
        };
    });

stripped down directive function:

$scope.loadPostComments = function(postid) {
    if($scope.postdata.total_comments) { //the post has comments
        if(!$scope.showCommentList) { //comments hidden (this is initally set to false in the directive)

            commentService.RestangularPost(postid).getList('comments').then(function(data) { //gets a list of comments and returns a promise

                commentService.comments[postid] = data; //populate the array with the comment data

                console.log('commentBox height is: ' + commentBox[0].offsetHeight); //does not display the correct height of the div

                console.log(commentBox); //this appears to display the correct offsetHeight value when I examine the obj properties in browsers console, no idea why

                $animate.addClass(commentBox, "comments-slider"); //call the beforeAddClass animation (commentBox div slides down it's div height)

            });
         } else { 
           $animate.removeClass(commentBox, "comments-slider"); //call the beforeRemoveClass animation (commentBox div slides up it's div height)
         }
         $scope.showCommentList = !$scope.showCommentList; //flip the boolean
    }
    console.log('commentBox height is: ' + commentBox[0].offsetHeight); //this also prints 0 on first run
};

It would be good to know if anyone has had this problem or if there are better ways to animate the div, A lot of the documentation found looked quite old, some of it out of date. Thanks in advance.