title: angularjs cube portfolio directive loadmore button
body: <p>I am trying to make <a href="http://webfixture.com/mine/documentation/" rel="nofollow">cubeportfolio</a> loadmore to work with angular directive, i have made it to work to show a single page </p>
  
  <p><strong>controller</strong></p>
  
  <pre><code>(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();
    }
  }());
  </code></pre>
  
  <p><strong>directive</strong></p>
  
  <pre><code>(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: '&lt;div class="cbp-popup-lightbox-counter"&gt;{{current}} of {{total}}&lt;/div&gt;',
          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);
      }
    }
  }());
  </code></pre>
  
  <p><strong>view</strong></p>
  
  <pre><code>&lt;div class="c-content-box c-size-md" ng-init="vm.loadTalents()" &gt;
    &lt;div id="grid-container" class="cbp" data="vm.talents" full-page-gallery&gt;
  
    &lt;/div&gt;
    &lt;div id="loadMore-container" class="cbp-l-loadMore-text"&gt;
      &lt;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"&gt;
        &lt;span class="cbp-l-loadMore-defaultText"&gt;LOAD MORE&lt;/span&gt;
        &lt;span class="cbp-l-loadMore-loadingText"&gt;LOADING...&lt;/span&gt;
        &lt;span class="cbp-l-loadMore-noMoreLoading"&gt;NO MORE WORKS&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>tpl</strong></p>
  
  <pre><code>&lt;div class="cbp-item" ng-repeat="d in data"&gt;
    &lt;a href="{{d.profileImageURL}}" class="cbp-caption cbp-lightbox"&gt;
      &lt;div class="cbp-caption-defaultWrap c-d-i-container"&gt;
        &lt;img src="{{d.profileImageURL}}" alt=""&gt;
      &lt;/div&gt;
      &lt;div class="cbp-caption-activeWrap"&gt;
        &lt;div class="cbp-l-caption-alignLeft"&gt;
          &lt;div class="cbp-l-caption-body"&gt;
            &lt;div class="cbp-l-caption-title"&gt;{{d.displayName}}&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>i attached the loadmore button to the <code>vm.loadTalents()</code> function and then concat the current with the newly found items, and when i do <code>console.log(vm.talents)</code> on loadmore button click, the data is concatenating correctly, but it doesn't append it to the directive.</p>