Load more button in AngularJS and lightGallery

I am using lightGallery for a website and I wanted to add a "load more" button to the gallery page, mostly for faster loading on mobile phones. I found various methods and tried them. Most of them don't work and/or doesn't suit my need for loading the elements on request.

One of them was with AngularJS:

var DemoApp = angular.module("DemoApp", []);
DemoApp.controller("DemoController",

function DemoController($scope) {
    $scope.quantity = 0;
    $scope.temp = [];
    $scope.loadMore = function () {
        for (i = $scope.quantity; i <= $scope.quantity + 1; i++) {
            $scope.temp.push($scope.images[i]);
        }
        $scope.quantity = i;
    }

    $scope.images = [{
        "src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13244856_238092939903469_3778800896503555327_n.jpg?oh=e539748b060ba0cb43852314e2fdef0b&oe=57F01511"
    }, {
        "src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13263891_238096316569798_4073904852035872297_n.jpg?oh=91a76b3515ac628706b912fdd3e9a346&oe=585C3DD1"
    }, {
        "src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13260007_238096336569796_6324932140560503740_n.jpg?oh=1795ba25c4604dced3cdcc91b9729cc7&oe=5820EE5A"
    }, {
        "src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/12871473_238096353236461_8115646425269026926_n.jpg?oh=b8958326d24a1a649e6a40adf29b062b&oe=582BFD38"
    }, {
        "src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13256520_238096376569792_9057528716929719317_n.jpg?oh=a6bc66f75992c88260ae35bd4dbc9ff1&oe=5856F934"
    }, {
        "src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13254297_238096389903124_1429633590050411734_n.jpg?oh=5e8c94a0b6a77dea110704a5727e0ee5&oe=5819B551"
    }, {
        "src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13267713_238096416569788_8740461856631991826_n.jpg?oh=739e3268996e498f65867b314265250b&oe=585E4C93"
    }];

    $scope.loadMore();
});

And this is my HTML mark up:

<div class="col-xs-12">
<div ng-app="DemoApp" ng-controller="DemoController">
<div id="fotoalbum" class="col-thumb-wrap">

<div class="col-thumb" ng-repeat="image in temp" data-src="{{image.src}}">
<a href="{{image.src}}">
<i class="thumb" style="background-image: url({{image.src}});"></i>
</a>
</div>

</div>
<button class="btn btn-default" ng-click="loadMore()">Ik wil meer</button>
</div>
</div>

The "load more" button it self worked, however it broke the lightGallery itself. Example: http://cytex.nl/projects/jk-installaties/album2.php

Then I found the solution for making lightGallery work with AngularJS in this StackOverflow question

I tried to combine the two but it still doesn't work. Now lightGallery gets fired up OK, but the "load more" button doesn't do anything!

Example: http://cytex.nl/projects/jk-installaties/album1.php

var DemoApp = angular.module('DemoApp', []);
DemoApp.controller('DemoController',
function DemoController($scope, $sce) {  
    $scope.total = 0;
  $scope.temp = [];
  $scope.loadMore = function () {
    for (x = $scope.total; x <= $scope.total + 1; x++) {
      $scope.temp.push($scope.photos[x]);
    }
    $scope.total = x;
  }

    $scope.photos = [{
        fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13244856_238092939903469_3778800896503555327_n.jpg?oh=e539748b060ba0cb43852314e2fdef0b&oe=57F01511'
    }, {
        fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13263891_238096316569798_4073904852035872297_n.jpg?oh=91a76b3515ac628706b912fdd3e9a346&oe=585C3DD1'
    }, {
        fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13260007_238096336569796_6324932140560503740_n.jpg?oh=1795ba25c4604dced3cdcc91b9729cc7&oe=5820EE5A'
    }, {
        fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/12871473_238096353236461_8115646425269026926_n.jpg?oh=b8958326d24a1a649e6a40adf29b062b&oe=582BFD38'
    }, {
        fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13256520_238096376569792_9057528716929719317_n.jpg?oh=a6bc66f75992c88260ae35bd4dbc9ff1&oe=5856F934'
    }, {
        fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13254297_238096389903124_1429633590050411734_n.jpg?oh=5e8c94a0b6a77dea110704a5727e0ee5&oe=5819B551'
    },{
        fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13267713_238096416569788_8740461856631991826_n.jpg?oh=739e3268996e498f65867b314265250b&oe=585E4C93'
    }];

  $scope.loadMore();

    for (var i = 0; i < $scope.photos.length; i++) {
        $scope.photos[i].fullres = $sce.trustAsResourceUrl($scope.photos[i].fullres);
    }
})
.directive('lightgallery', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      if (scope.$last) {
        element.parent().lightGallery({
            showThumbByDefault: false
        });
      }
    }
  };
});

I am very new to AngularJS,so I'm sorry if this is a really stupid question. Could you guys help to identify the problem and maybe pointers on how to tackle this?

Solution

Append this fragment of your code to the last row of loadMore function:

for (var i = 0; i < $scope.photos.length; i++) {
        $scope.photos[i].fullres =      $sce.trustAsResourceUrl($scope.photos[i].fullres);
    }

This part should be run each time you add an item to the array, It means this should be run each time the function loadMore triggers. Hope this will be helpfull. Regards.