angular js - перестать отображать изображения при достижении переполнения

У меня есть куча изображений, которые im обслуживают (от внешнего источника im хостинг в другом месте) на странице через mvc fileresult и в угловой ng-src.

например.

<div ng=repeat="img in Images">
        <img ng-src={{img.path}} style="height:100px;width:auto" />
</div>'

В этом случае я знаю, что img.path всегда обращается к внешнему С# mvc и возвращает filestream к контенту.

Я хочу только подобрать определенную "суммированную" ширину изображений на экране, чтобы у меня не было изображений наполовину, например, если бы я использовал "overflow: hidden" в родительском div.

Есть ли способ, которым я могу установить ng-repeat, чтобы продолжить, пока следующее изображение не переполнится (и, таким образом, полностью предотвратит переполнение)? Изображения изменяются так, чтобы их высота была установлена равной 100px, а пропорциональное масштабирование ширины соответствовало этому размеру. '

Я думал, что нижеследующая директива будет делать трюк, но по какой-то причине она, похоже, перемасштабирует изображения.

App.directive('styleParent', function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attr) {
            elem.on('load', function () {
                var w = $(this).width(),
                    h = $(this).height();

                var xPos = angular.element(this).prop('offsetLeft');
                xPos += w;

                var div = elem.parent();
                var d_width = div.width();
                var d_xPos = angular.element(div).prop('offsetLeft');
                d_xPos += d_width;

                console.log([xPos, d_xPos, this])
                if (xPos > d_xPos) {
                    angular.element(this).hide();
                }


            });
        }
    };
});