Hello Reader's if you are making the website and you want to create a switch which convert thumb view into listing and listing view in thumb view then you take the help from the code as below:-

Here is the html page and code will go like this:-

<div ng-app="switchableGrid" ng-controller="SwitchableGridController">

    <div class="bar">       
        <a class="list-icon" ng-class="{active: layout == 'list'}" ng-click="layout = 'list'"></a>
        <a class="grid-icon" ng-class="{active: layout == 'grid'}" ng-click="layout = 'grid'"></a>
    </div>
    <ul ng-show="layout == 'grid'" class="grid">
        <!-- A view with big photos and no text -->
        <li ng-repeat="p in pics">
            <a href="{{p.link}}" target="_blank"><img ng-src="{{p.images.low_resolution.url}}" /></a>
        </li>
    </ul>
    <ul ng-show="layout == 'list'" class="list">

        <li ng-repeat="p in pics">
            <a href="{{p.link}}" target="_blank"><img ng-src="{{p.images.thumbnail.url}}" /></a>
            <p>{{p.caption.text}}</p>
        </li>
    </ul>
</div>

In this html page there is switch which will work as a toggle button between thumb and listing views and it's name is "SwitchableGridController". Now create the JS file and paste the following code in it.

var app = angular.module("switchableGrid", ['ngResource']);
app.factory('instagram', function($resource){

    return {
        fetchPopular: function(callback){

            var api = $resource('https://api.instagram.com/v1/media/popular?client_id=:client_id&callback=JSON_CALLBACK',{
                client_id: '642176ece1e7445e99244cec26f4de1f'
            },{

                fetch:{method:'JSONP'}
            });

            api.fetch(function(response){

                        });
        }
    }

});


function SwitchableGridController($scope, instagram){

    $scope.layout = 'grid';
    $scope.pics = [];

    instagram.fetchPopular(function(data){

        $scope.pics = data;
    });

}

In this JS file the dummy data is comming from Instagram(Most popular pics) you can change them to your location. So now load this script and on browser you'll see the pics are showing in thumb with their caption below them. Now switch them to listing view and they will re-arrange into one by one listing view in real time.