How to check height of an element inside controller?

Question

I have to implement a three column layout in which a new item will be loaded to the column which is of lowest height. Adding to the column is simple I just have to push the object into an array. Which I am doing in controller.

Although its easy to check the height of the column in controller before making the decision of where to insert new item. but that would be jQuery way of implementation not the angular way. How do I implement it in "angular way" ?

// Inside controller
$scope.column1 = [];
$scope.column2 = [];
$scope.column3 = [];
var pushToColumn = function(items) {
  for(var i = 0; i < items.length; i++) {
    // TODO: Check the height of columns;
    // Suppose height of column2 is minimum;
    $scope.column2.push(items[i]);
  }
}

var myItems = [
  {src: 'http://link.to/image1.png'},
  {src: 'http://link.to/image2.png'},
  {src: 'http://link.to/image3.png'},
  {src: 'http://link.to/image4.png'},
  {src: 'http://link.to/image5.png'},
  {src: 'http://link.to/image6.png'},
  {src: 'http://link.to/image7.png'},
  {src: 'http://link.to/image8.png'}
];
pushToColumn(myItems);

HTML

<div class="col-md-4">
  <div class="row" ng-repeat="item in column1">
    <div class="col-md-12">
     <img ng-src="item.src">
    </div>
  </div> 
</div>
<div class="col-md-4">
  <div class="row" ng-repeat="item in column2">
    <div class="col-md-12">
     <img ng-src="item.src">
    </div>
  </div> 
</div>
<div class="col-md-4">
  <div class="row" ng-repeat="item in column3">
    <div class="col-md-12">
     <img ng-src="item.src">
    </div>
  </div> 
</div>

Answer 1

Hi Rahul wafflejock from the IRC here, got the answer

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, ColumnService, $timeout) {
  // Inside controller
  $scope.column1 = ColumnService.findColumn("column1").data;
  $scope.column2 = ColumnService.findColumn("column2").data;
  $scope.column3 = ColumnService.findColumn("column3").data;
  var pushToColumn = function(items) {
    for(var i = 0; i < items.length; i++) {
      // TODO: Check the height of columns;
      // Suppose height of column2 is minimum
      // For now let me push it in round-robin way
      ColumnService.findSmallestColumn().data.push(items[i]);
    }
  }

  var myItems = [
    {src: 'http://images.fineartamerica.com/images-medium-large-5/winter-sparkle-original-madart-painting-megan-duncanson.jpg'},
    {src: 'http://www.designsnext.com/wp-content/uploads/2014/02/Painting-19.jpg'},
    {src: 'http://www.osnatfineart.com/paintings/08-01/08-01-clouds-painting.jpg'},
    {src: 'https://lh3.googleusercontent.com/-FaDzl-m6UlI/UHervg39HTI/AAAAAAAAAEc/j23-tepXMy8/w379-h379-p/krish2.jpg'},
    {src: 'http://www.spectrahut.com/media/catalog/product/cache/1/image/600x600/9df78eab33525d08d6e5fb8d27136e95/w/a/wall-painting-designs-buy-paintings-online-oil-paintings-canvas-painting-indian-paintings-abstract-painting.jpg'},
    {src: 'http://www.designsnext.com/wp-content/uploads/2014/01/love-painting.jpg'},
    {src: 'http://www.nonprints.com/UploadPic/Garmash/big/Dreaming%20of%20Love.jpg'},
    {src: 'http://www.dollsofindia.com/images/products/animal-posters/horses-painting-wild-spirits-PA82_l.jpg'},
    {src: 'http://best-home-decor.com/wp-content/uploads/2011/12/canvas-painting1.jpg'},
    {src: 'http://webneel.com/daily/sites/default/files/images/daily/12-2012/18-painting-obama.jpg'}
  ];
  var count = 0;
  function staggeredLoading(){

    ColumnService.findSmallestColumn().data.push(myItems[count++])
    if(count<myItems.length-1)
      $timeout(staggeredLoading)
  }
  staggeredLoading();

  //pushToColumn(myItems);
});

app.service("ColumnService", function(){
  var service = {
    columnData:[],
    findSmallestColumn:function(){
      var min = 10000;
      var retColumn = null;
      for (var i = 0; i < service.columnData.length; i++) {
        var curColumn = service.columnData[i];
        if(curColumn.height<min)
        {
          min = curColumn.height;
          retColumn = curColumn;
        }
      }
      console.log("smallest column", retColumn)
      return retColumn;
    },
    findColumn:function(name){
      for (var i = 0; i < service.columnData.length; i++) {
        if(service.columnData[i].name == name)
          return service.columnData[i];
      }
      return service.createColumn(name);
    },
    createColumn:function(name){
      var newColumn = {name:name, height:0, data:[]};
      service.columnData.push(newColumn)
      return newColumn;
    }
  };
  return service;
})

app.directive("namedColumn",function(ColumnService){
  return {
    restrict:"A",
    scope:{namedColumn:"@"},
    link:function(scope, iElem, iAttrs){
      scope.thisColumn = ColumnService.findColumn(scope.namedColumn);

      scope.$watchCollection(function(){return scope.thisColumn.data}, function(newVal,oldVal){
        scope.thisColumn.height = iElem[0].offsetHeight;
        console.log(scope.thisColumn);
      })
    }
  }
})

http://plnkr.co/edit/WCUIhSkJqD1eYhbLuy32?p=preview