ng-show | ng-hide: watch element height - angularjs

Question

I'm using this code to watch children height change:
$scope.$watch(function () {
return element.children().height();
},
function (newHeight) {
if (newHeight) {
element.height(newHeight);
}
});
It works pretty well with ng-if, but ng-show | ng-hide doesn't fire height change event.
Is there any way to watch the height when I use ng-show | ng-hide directives?
Example:
<div class="form-slider">
<div ng-if="step === 1" class="animate">
<div ng-show="error">Error message</div>
Some content
</div>
<div ng-if="step === 2" class="animate">
<div ng-show="error">Error message</div>
Some content
</div>
</div>
I'm using animation to switch between ng-ifs, so:
.form-slider has position: relative, while .animate: position: absolute. As you might know, html doesn't calculate height for .form-slider in this case and I have to use JS to change it's height.

Answer 1

The only way I found to fix this is to use removeClass | addClass events for ng-hide class:
myModule.animation('.ng-hide', function () {
var changeHeight = function (element) {
var container = element.closest('.my-selector');
container.parent().height(container.height());
};
return { removeClass: changeHeight, addClass: changeHeight }
});
Not sure if this is the best solution, but at least it works.
Update
I've found better solution. When you need to calculate height of your page using JS and you want to update height dynamically, when ng-show | ng-hide changes its state.
All what you need to do is just "extend" ngShow & ngHide:
(function () {
var heightDirective = ['$rootScope', '$timeout', function ($rootScope, $timeout) {
return {
restrict: 'A',
link: function ($scope, element, attrs) {
$scope.$watch(attrs.ngShow, function (newVal, oldVal) {
if (!angular.equals(newVal, oldVal)) {
$timeout(function () {
$rootScope.$broadcast('element:heightChange', element.height());
}, 100);
}
});
$timeout(function () {
$rootScope.$broadcast('element:heightChange', element.height());
}, 500);
}
}
}];
angular.module('mean.system').directive('ngShow', heightDirective);
angular.module('mean.system').directive('ngHide', heightDirective);
angular.module('mean.system').directive('ngIf', heightDirective);
})();
Then, add listener into your controller or directive:
$rootScope.$on('element:heightChange', function () {
element.height(element.children().height());
});