Angular JS Instagram Service

HTML

<div ng-app="GridCambiable" ng-controller="GridCambiableController">

	<div class="bar">

		<!-- These two buttons switch the layout varaible,
			 which causes the correct UL to be shown. -->

		<a class="list-icon" ng-class="{active: isLayout('list')}" ng-click="setLayout('list')"></a>
		<a class="grid-icon" ng-class="{active: isLayout('grid')}" ng-click="setLayout('grid')"></a>
	</div>

	<!-- We have two layouts. We choose which one to show depending on the "layout" binding -->

	<ul ng-show="isLayout('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="isLayout('list')" class="list">
		<!-- A compact view smaller photos and titles -->
		<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>

CSS

</style> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
<style>
*{
	margin:0;
	padding:0;
}

body{
	font:15px/1.3 'Open Sans', sans-serif;
	color: #5e5b64;
	text-align:center;
}

a, a:visited {
	outline:none;
	color:#389dc1;
}

a:hover{
	text-decoration:none;
}

section, footer, header, aside, nav{
	display: block;
}

/*-------------------------
	The search input
--------------------------*/

.bar{
	background-color:#5c9bb7;

	background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);
	background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);
	background-image:linear-gradient(top, #5c9bb7, #5392ad);

	box-shadow: 0 1px 1px #ccc;
	border-radius: 2px;
	width: 580px;
	padding: 10px;
	margin: 45px auto 25px;
	position:relative;
	text-align:right;
	line-height: 1;
}

.bar a{
	background:#4987a1 center center no-repeat;
	width:32px;
	height:32px;
	display:inline-block;
	text-decoration:none !important;
	margin-right:5px;
	border-radius:2px;
	cursor:pointer;
}

.bar a.active{
	background-color:#c14694;
}

.bar...

JavaScript

var app = angular.module("GridCambiable", []);

// Creamos y registramos el nuevo servicio de instagram
app.factory('instagram', ['$http', function($http){

	return {
		fetchPopular: function(callback){
            
            var endPoint = "https://api.instagram.com/v1/media/popular?client_id=1405992013.1677ed0.6d6b4258447a4cbd8ab3b652188d2d47&callback=JSON_CALLBACK";
            
            $http.jsonp(endPoint).success(function(response){
                callback(response.data);
            });
		}
	}

}]);

app.controller('GridCambiableController', ['$scope', 'instagram' ,
function ($scope, instagram){

	// Layout por defecto

	$scope.layout = 'grid';
    
    $scope.setLayout = function(layout){
        $scope.layout = layout;
    };
    
    $scope.isLayout = function(layout){
        return $scope.layout == layout;
    };

	$scope.pics = [];

	// Usamos el servicio q construimos
	instagram.fetchPopular(function(data){

		$scope.pics = data;
	});

}]);