AngularJS Dynamically change height based on width

Question

I have a table printed via ng-repeat , and my goal is to make every single td in tbody square. All the td s are equal in width, so I only need to check the first one to make changes. However, the page is dynamic so the width of table and therefore the td will change on window resize.

I have stylesheet in head .

<style type="text/css">.squerify>tr{height:60px;}</style>

This is used to change the height via:

document.styleSheets[1].cssRules[0].style.height=document.querySelector('.squerify td').offsetWidht+"px";

This works on its own, but I wonder how to get angular to tell me, that the td has changed its width (here I was thinking about the 'onresize' on window event).

Well, onresize might work now, but how about the initialization?
I have not found a way to let angular to tell me that it finished all its work.
PS.: The table is in view, if that changes anything...

The questions are as follow:

• Is there a better way to check for the page resize in angular?
• What to use for the initialization of table?

Answer 1

For everyone who would like to know how to do square elements:

1. We need a base element (div will do it) give it class (I will use square), this one will be square:

    <div class="square"></div> 

2. We put an img tag inside: (the "data:..." is needed, don't remove it, it is 1x1px transparent img)

3. We need a bit of css:

    .square img{ width: 100%; height: auto; border: 0; } .square *:not(img){ position: absolute; top: 0; right: 0; bottom: 0; left: 0; } 

4. That is it, easy right?