Pinterest Pin API

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.1/angular-material.min.css"/>
    <script data-require="angular.js@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
    <script data-require="angular-resource@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-resource.js"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.1/angular-material.min.js'></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="PinterestHQPhotos">
    <div ng-controller="PinList">
      <md-content class="md-padding">
        <pin-loader ng-click='openFullscreen()' ng-repeat="pin in pins" src="pin.images['237x'].url.replace('237x', 'originals')" height="100%" >
        </pin-loader>
      </md-content>
    </div>
  </body>

</html>

// Code goes here
angular
  .module('PinterestHQPhotos', ['ngResource', 'ngMaterial'])
  .controller('PinList', ['$scope', '$resource', '$mdDialog', function($scope, $resource, $mdDialog){
    var Pin = $resource('http://api.pinterest.com/v3/pidgets/boards/:username/:board/pins/', {
        callback: "JSON_CALLBACK"
    },
    {
        getPins: {
            method: "JSONP"
        }
    });
    $scope.username = 'thevarunoberoi';
    $scope.board = 'wallpapers';
    $scope.pins = [];
    
    Pin
      .getPins({username: $scope.username, board: $scope.board})
      .$promise
      .then(function(res){
        $scope.pins = res.data.pins;
      });
    
    $scope.openFullscreen = function(ev) {
      $mdDialog.show({
        template: 'Yo',
        parent: angular.element(document.body),
        targetEvent: ev,
        clickOutsideToClose:true
      })
    }
  }])
  .directive('pinLoader', [function(){
    return {
      link: function(scope, element, attrs) {   
        scope.size = {
          height: 0,
          width: 0
        }
        element.find('img').bind("load" , function(e){ 
          scope.size.height = this.naturalHeight
          scope.size.width = this.naturalWidth
          console.log(scope.size)
          scope.$apply()
        });
      },
      templateUrl: 'item-template.html',
      scope: {
        src: '&'
      }
    }
  }])

/* Styles go here */


<md-card>
  <img ng-src="{{src()}}" class="md-card-image" alt="Washed Out">
  <md-card-content>
    <h2 class="md-title">Paracosm</h2>
    <p>
      {{size.width}}x{{size.height}}
    </p>
  </md-card-content>
</md-card>