What is the angularjs way of changing an elements style based on the height of another element

Question

$('#reply').css("padding-top", $('.post:visible').height()-35 + "px" );

What I'm doing is setting the CSS padding-top value for #reply to .post 's height.

The only way I can get this to work in my AngularJS project so far is to to this:

$(function() {
  setTimeout(function () {
    $('#reply').css("padding-top", $('.post:visible').height()-35 + "px" )
  },300)
});

How would I do it the Angular way, for example maybe something like this with the code being some kind of angular.copy ? Or can I just keep using jQuery. If so how would I make it fire when AngularJS is done, so I don't need a timeout function?

<div id="#reply" ng-style="{'padding-top' : code_that_returns_.post:visible's_height }">

Answer 1

The question is poorly asked but I decided I will work on both the question and answer over time.

Currently this is my solution (it solves my problem of the timeout).

<div id="#reply" ng-style="{'padding-top' : calcPostHeight() }">

$scope.calcPostHeight = function () {
  return $('.post:visible').height()-35 + "px";
};

EDIT:

This solution seems worse... but uses a directive.

<div id="#reply" post-height="35">

.directive('postHeight', function($timeout){
  return {
    link: {
      post: function (scope, element, attr) {
        $timeout(function(){
          var result = document.getElementsByClassName("post")[0];
          element[0].style.paddingTop = result.style.width - attr.postHeight;
        }, 0)
      }
    }
  }
});