使用媒体查询和屏幕大小重复更改

Question

我有一个JSon文件，意味着类似于Youtube信息集合。 因此，有几种不同大小的图像。 我目前正在使用ng-repeat列出我的html中的图像并指向特定的图像大小。

根据屏幕尺寸（媒体查询）改变此ng-repeat路径的推荐方法是什么

         <div class="video-list">
          <div class="scrollbar scroll-y">
              <div data-ng-repeat="video in videos"class="list-items">
                <ul>
                  <li>
                    <a href="#" data-ng-click="setVideo(video.snippet.resourceId.videoId, video.snippet.title, video.snippet.description)">
                    <img src="[[video.snippet.thumbnails.medium.url]]"/>
                    <h3><span>[[video.snippet.title| removeBrackets]]</span></h3>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>

但我想在屏幕处于特定尺寸时显示[[video.snippet.thumbnails.default.url]]。我知道我可能需要制作过滤器或功能。我对角度和javascript太新了，无法理解最佳实践。

非常感谢任何指导：）