AngularJS reading Json when page view changed

Maybe Question is wrong header. I m new to AngularJS and trying parsing Json. I can parse right.But I have problem with file size.in my example there are 171 image loading same time.its very big problem for me .How can Solve I this.

app.js

 var app = angular.module('starter', ['ionic'])
    .run(function ($ionicPlatform) {
        $ionicPlatform.ready(function () {

            // Hide the accessory bar by default (remove this to show the accessory bar above the   keyboard
            // for form inputs)
            if (window.cordova && window.cordova.plugins.Keyboard) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            }
            if (window.StatusBar) {
                StatusBar.styleDefault();
            }
        });
    });

var photourl = "https://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=342c8c0d41a873f14d05c7095fe9e16a&photoset_id=72157636419733235&format=json&nojsoncallback=1";
app.controller('CountryCtrl', function ($scope, $http) {
    $http.get(photourl).success(function (data) {
        $scope.countries = data;
    });
});

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no,  width=device-width">
        <title></title>

        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">

        <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
        <link href="css/ionic.app.css" rel="stylesheet">
        -->

        <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>


        <!-- cordova script (this will be a 404 during development) -->
        <script src="cordova.js"></script>

        <!-- your app's js -->
        <script src="js/app.js"></script>


    </head>
    <body ng-app="starter" ng-controller="CountryCtrl">


    <ion-slide-box show-pager="false" on-slide-changed="slideHasChanged($index)" ng-repeat="product in countries">
        <ion-slide ng-repeat="page in product.photo">
            <img width="95%" height="90%" ng-src="https://farm{{page.farm}}.staticflickr.com/{{page.server}}/{{page.id}}_{{page.secret}}_b.jpg" />
        </ion-slide>
    </ion-slide-box>

</body>
</html>

Here is an AngularJS module to support lazy loading. I think it is what you are seeking. https://github.com/revolunet/rn-lazy

Also there is another example here with a custom attribute directive bn-sazy-src on an image tag.

http://jsfiddle.net/maxhq/vQ62Y

<img bn-lazy-src="{{ photo.src }}" width="150" height="150" alt="Christina Cox" />