双重ng-repeate和ng-src绑定到一个函数

Question

我正在尝试制作一个正方形网格并用图像动态填充它。我所拥有的是一个包含如下对象的数组：

{
  img: "./images/1.jpg",
  x: 1,
  y: 1
}

x和y坐标代表网格上的方块。

partial.hmtl

<div ng-repeat="row in squaresCtrl.getGridSize()  track by $index">
   <div ng-repeat="col in squaresCtrl.getGridSize() track by $index">
        <div id="{{row +','+col}}" class="square">
              <img ng-src="{{squaresCtrl.getSquare(row,col)}}">
        </div>
   </div>
 </div>

app.js

self.getSquare = function (row, col) {
            self.clickedSet.squares.forEach(function (sq) {
                if (sq.x === row && sq.y === col) {
                    console.log("x:"+row);
                    console.log("y:"+col)
                    console.log(sq.img);
                    return sq.img;
                }
            });
        };

div的id按预期设置，但是我没有加载任何图像。当我打印函数的结果时，它似乎被多次调用。我是Angular的新手，我确信我错过了关于如何在ng-repeat中执行函数的重要事项。

修改 这是在浏览器中呈现的前两个div的图片。有一个图像标记，但没有任何属性。

我有25个物体。从console.log我得到的是前5个（1,1; 1,2; 1,3; 1,4; 1,5），然后是25个对象的整个列表的3倍。

非常感谢任何帮助！