Html Element ClientHeight returns inconsistent value - html

Question

I have a simple Html element, that I am accessing from within a directive:
<div scroll-item ng-repeat="post in posts">
...
app.directive("scrollItem", function($window){
return {
link : function($scope, $element, $att) {
console.log($element[0].clientHeight);
console.dir($element[0]);
}
}
});
The two different logs produce different results. When I look through the object found in the second log, clientHeight returns 166; which is correct, In the first log however it returns 201. How can it possibly produce such inconsistent results?
I am not able to reproduce the issue in this simple fiddle: http://jsfiddle.net/9noo4uc5/1/
What could cause an issue like this?

Answer 1

Any element's client height return inner height of element so it is not necessary that every time it will return same value. Each element which has more text inside it which means more clientHeight.
The Element.clientHeight read-only property is zero for elements with no CSS or inline layout boxes, otherwise it's the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.
source:https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight
myApp.directive("scrollItem", function(){
return {
link : function($scope, $element, $att) {
$element.on('click',function(){
console.log(this.clientHeight);
})
}
}
});
See this fiddle it is returning different innerHeight when you click on last element :
http://jsfiddle.net/9noo4uc5/6/