Items from Firebase not displaying in Angular Grid

Question

I'm having some difficulty getting items to display inside this grid when getting them from Firebase. I managed to get it working with a custom Service that returned a static array.

I know the data is reaching the browser because I can log it out as JSON like so.

<pre>
{{ data | json }}
</pre>

HTML

<ul class="dynamic-grid" angular-grid="pics" grid-width="300" gutter-size="10" angular-grid-id="gallery" refresh-on-img-load="false" >
     <li data-ng-repeat="item in data" class="grid">
         <img src="{{item.url}}" class="grid-img" data-actual-width = "{{item.width}}"  data-actual-height="{{item.height}}" />
     </li>
 </ul>

However, the items do not appear in the view, or should I say they are there but Angular-Grid and its CSS is not working as it does with the static array. Here is the main part of the code.

Controller

var list = iService.getItems().$loaded()
  .then(function(list) {
    var cnt = list.length;
    //console.log("cnt ", cnt);

    angular.forEach(list,function(image,index){
      //console.log('Item: ', list[index]);

      var imageTemp = new Image();
      imageTemp.onload = function(){
        list[index].height = this.height + 'px';
        list[index].width = this.height + 'px';

      };
      imageTemp.src = image.url;

      cnt--
      // test to see if all items have been iterated before setting $scope.data 
      if(!cnt){
        console.log("done....", cnt);
        console.log("ere ", list);
        $scope.data = list;
      } else {
        console.log("Current cnt ", cnt);
      }

    });

Nothing displays, despite the JSON still appearing. Incidentally, the Angular-Grid class .grid-img has opacity:0 and visibility:hidden that when deactivated in dev tools show the items from Firebase but without the Angular-Grid resizing/styling.

It's probably not the best way to achieve it but I'm experimenting and feel the data coming from Firebase instead of a static array shouldn't make a difference. Anyone know what could be going wrong here? All help appreciated.Thanks!

Answer 1

The example in the documentation uses angular-grid="pics" in the ul attributes and $scope.pics=... in the controller.

angular-grid="pics" defines the model you want to listen

But you're setting $scope.data. Does that make any difference?