Galleria won't load images in AngularJS

Question

I have a script like below

var dummyAlbum = [
    {image: 'http://i.imgur.com/7Osllxil.jpg'},
    {image: 'http://i.imgur.com/YACmI1G.jpg'},
    {image: 'http://i.imgur.com/af4ZDy8.jpg'},
    {image: 'http://i.imgur.com/P5LwCTg.jpg'}
];

function shuffle(o){
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};
angular.module('MyApp', [])
    .controller('MyController', 
        ['$scope', '$timeout', 
        function($scope, $timeout){
             Galleria.loadTheme('http://cdnjs.cloudflare.com/ajax/libs/galleria/1.3.5/themes/classic/galleria.classic.min.js');
             Galleria.run('#pictures');
             var gallery = $('#pictures').data('galleria');
             $scope.loadRandomAlbum = function(){
                 console.log('test');
                 shuffle(dummyAlbum);
                 gallery.load(dummyAlbum);
             };
             $scope.loadRandomAlbum();
    }]);

Full script can be seen in this JSFiddle.

In initial load the $scope.loadRandomAlbum(); the Galleria won't load the shuffled images although the console.log('test') was executed. But when I clicked the button, the gallery successfully load the images.

What did I do wrong?

Answer 1

First of all, you are mixing Angular and Jquery, and this is totally wrong, you don't mix both of them.

The reason that your view is not being updated because whatever Jquery is doing is out of AngularJS' knowledge. Remember that:

$digest cycle will account for only those model changes which are done inside AngularJS’ context.

Any updates that is done to the scope, cannot update your jquery code; and since it loads a bit later, it is not being displayed. If you have created that image gallery with ng-src, then it would have loaded as you expected. In your case, I believe you just want to patch your code so that it runs. Just change last Just change $scope.loadRandomAlbum(); to this:

setTimeout(function() {
    $scope.$apply(function() {
         $scope.loadRandomAlbum();
         console.log('updated');
    });
}, 250);

Here is the fiddle: http://jsfiddle.net/qp76u9km/