(function() {
  'use strict';

  angular
    .module('talents')
    .controller('MyController', MyController);

  MyController.$inject = ['UsersService'];

  function MyController(UsersService) {
    var vm = this;

    vm.talents = [];
    vm.loadTalents = loadTalents;
    vm.query = {
      query: ''
    };

    // SCOPE FUNCTIONS
    function loadTalents() {
      var query = {
        limit: 5,
        offset: vm.currentOffset
      };

      UsersService.get(query).$promise.then(
        _successResponseHandle
      );
    }

    function nextPage() {
      loadTalents();
    }

    // PRIVATE FUNCTIONS
    function _successResponseHandle(response) {
      if (vm.talents.length === 0) {
        vm.talents = response.docs;
      } else {
        vm.currentOffset += 1;
        var newItems = response.docs;
        vm.talents = vm.talents.concat(newItems);
      }
    }

    function activate() {
      vm.currentOffset = 1;
    }

    activate();
  }
}());

(function() {
  'use strict';
  /**
   * Cube Portfolio Fullwidth Directive
   */
  angular.module('core')
    .directive('fullPageGallery', fullPageGallery);

  fullPageGallery.$inject = ['$timeout'];

  function fullPageGallery($timeout) {
    var directive = {
      retrict: 'EA',
      link: link,
      transclude: false,
      scope: { data: '=' },
      templateUrl: 'modules/talents/client/views/tpl/gallery.full.html'
    };

    return directive;

    function link(scope, element, attrs) {
      var options = {
        filters: '#filters-container',
        loadMore: '#loadMore-container',
        loadMoreAction: 'click',
        layoutMode: 'grid',
        defaultFilter: '*',
        animationType: 'fadeOutTop',
        gapHorizontal: 0,
        gapVertical: 0,
        gridAdjustment: 'responsive',
        mediaQueries: [{
          width: 1600,
          cols: 5
        }, {
          width: 1200,
          cols: 4
        }, {
          width: 800,
          cols: 3
        }, {
          width: 500,
          cols: 2
        }, {
          width: 320,
          cols: 1
        }],
        caption: 'zoom',
        displayType: 'lazyLoading',
        displayTypeSpeed: 100,

        // lightbox
        lightboxDelegate: '.cbp-lightbox',
        lightboxGallery: true,
        lightboxTitleSrc: 'data-title',
        lightboxCounter: '<div class="cbp-popup-lightbox-counter">{{current}} of {{total}}</div>',
        singlePageCallback: function(url, element) {
          console.log(scope.data);
          var t = this;

          t.updateSinglePage(scope.data);
        }
      };
      var e = angular.element(document.querySelector('#grid-container'));
      $timeout(function() {
        e.cubeportfolio(options);
      }, 3000);
    }
  }
}());

<div class="c-content-box c-size-md" ng-init="vm.loadTalents()" >
  <div id="grid-container" class="cbp" data="vm.talents" full-page-gallery>

  </div>
  <div id="loadMore-container" class="cbp-l-loadMore-text">
    <button ng-model="vm.currentOffset" ng-click="vm.loadTalents()" class="btn btn-danger c-btn-square c-btn-border-2x c-btn-bold c-btn-uppercase cbp-singlePageInline">
      <span class="cbp-l-loadMore-defaultText">LOAD MORE</span>
      <span class="cbp-l-loadMore-loadingText">LOADING...</span>
      <span class="cbp-l-loadMore-noMoreLoading">NO MORE WORKS</span>
    </button>
  </div>
</div>

<div class="cbp-item" ng-repeat="d in data">
  <a href="{{d.profileImageURL}}" class="cbp-caption cbp-lightbox">
    <div class="cbp-caption-defaultWrap c-d-i-container">
      <img src="{{d.profileImageURL}}" alt="">
    </div>
    <div class="cbp-caption-activeWrap">
      <div class="cbp-l-caption-alignLeft">
        <div class="cbp-l-caption-body">
          <div class="cbp-l-caption-title">{{d.displayName}}</div>
        </div>
      </div>
    </div>
  </a>
</div>