top CSS attribute set incorrectly upon first load of a model

[blinder]

In our QA environment we notice something quite odd, the 'top' CSS attribute is set incorrectly by the directive when first loading the model.

we have a standard list, and we use pagination. when the first "page" is loaded the 'top' parameter on the <li> items not on the first row is set to a really low pixel number, 20px for example.

when you page through the list, and go back to the first page, angulargrid "fixes" or re-renders the grid with the correct 'top' attribute setting (in our example, 204px)

it doesn't matter if some elements have images, while some do not.

This behavior doesn't happen locally, just on our QA server and it appears to have something to do with API server response times.

Not sure what could possibly be causing this. I've created a short screengrab of what this looks like: http://recordit.co/pxwaFELkMz

[blinder]

to add some more context, "fixing" this can be done by adding some time to the timeout call in the watch function:

function watch() {
  scrollNs.isBusy = true;
  $timeout(function() {
    listElms = getListElms();
    ngCheckAnim().then(function() {
        //handle images
        handleImage();
        $timeout(function() {
             //to handle scroll appearance
             reflowGrids();
          },1000);
       });
    },1000);
}

this clearly is not a real fix, but there is something here with respect to how "quickly" this directive wants to update the view

[blinder]

our problem turns out was that our <ul> tag had an ng-if on it looking at the state of the model, which apparently prevented the DOM from getting updated in time. changing ng-if to ng-show solved this problem