ngAnimate max-height not working on certain element

I've implemented ngAnimate into a project to help with animations, but I'm getting really odd behaviour with a certain element.

To add some background, we have a shop with categories and products inside the categories. I'm doing an ng-repeat with: data-ng-repeat="product in currentProductCategory.Products" and I have data-ng-class="{ 'open': product.ShowDetails == true }" on my root element.

My root element also has an id of product-{{product.Id}}-{{currentProductCategory.Id}} and I have a child element with id product-options-{{product.Id}}-{{currentProductCategory.Id}} which products expected results.

When clicking a button, I call a function that sets the max-height on the parent element to a desired height, and the animation is handled in the CSS. Here's the function code:

var reg = /d+/g;
var productParentElement = $('#product-' + product.Id + '-' + $scope.currentProductCategory.Id);
var optionsElement = $('#product-options-' + product.Id + '-' + $scope.currentProductCategory.Id);

var productParentPaddingTop = parseInt(productParentElement.css("padding-top").match(reg));
var productParentPaddingBottom = parseInt(productParentElement.css("padding-bottom").match(reg));
var productParentTotalHeight = productParentPaddingTop + productParentPaddingBottom + productParentElement.height() + optionsElement.height();

var optionsElementPaddingTop = parseInt(optionsElement.css("padding-top").match(reg));
var optionsElementPaddingBottom = parseInt(optionsElement.css("padding-bottom").match(reg));
var optionsElementTotalHeight = optionsElementPaddingTop + optionsElementPaddingBottom + optionsElement.height();

var totalHeight = productParentTotalHeight + optionsElementTotalHeight;

if (product.ShowDetails) {
    product.ShowDetails = true;
    productParentElement.css("max-height", totalHeight);
} else {
    product.ShowDetails = false;
    productParentElement.removeAttr('style');
}

And my CSS for the closed and open classes:

Closed:

.products-list .product {
    margin-bottom: 20px;
    max-height: 200px;
    overflow: hidden;
    -moz-transition: max-height 2s ease;
    -o-transition: max-height 2s ease;
    -webkit-transition: max-height 2s ease;
    transition: max-height 2s ease;
}

Open:

.products-list .product.open {
    -moz-transition: max-height 2s ease;
    -o-transition: max-height 2s ease;
    -webkit-transition: max-height 2s ease;
    transition: max-height 2s ease;
    max-height: 200px;
}

This has been gating on us for a long time now and it's becoming a real issue, any help is greatly appreciated.