angularjs - reload-on-show with angular masonry not working -

i have got little photo app on build better understand angular struggling masonary reload when tab opened. using https://github.com/passy/angular-masonry

so far have wall of photos, on 1 side my/(the users) photos, , on other users friends photos. nothing spectacular.

everything works great except when click second tab (the friends photo wall), masonry not reloading.

https://github.com/passy/angular-masonry#user-content-reload-on-show states need add attribute: reload-on-show in turn reload container when ng-show called.

but not want play ball.. instead site on top of each other. far can tell appling ng-show correctly.

the controller

 photoapp.controller('photowall', ['$scope', '$http', '$log',     function($scope, $http, $log) {         /* handle photos */         $http.get('/api/my-photos').success(function (data) {             $scope.myphotos = data;         });         $scope.$on('handleupdatemywall', function(event, obj) {             $scope.myphotos.unshift( obj );             $scope.$apply();         });          /* handle photos */         $http.get('/api/friends-photos').success(function (data) {             $scope.friendsphotos = data;         });          /* handle tabbed interface */         $scope.showmyphotos = true;         $scope.showfriendsphotos = false;         $scope.show = {             friendsphotos: function(){                 $scope.showmyphotos = false;                 $scope.showfriendsphotos = true;             },             myphotos: function(){                 $scope.showmyphotos = true;                 $scope.showfriendsphotos = false;             }         }      }]); 

the html

<section ng-controller="photowall" class="photowall">      <ul id="cssmenu" class="nav-tabs">         <li ng-class="{active: showmyphotos }">             <a href ng-click="show.myphotos()">my photos</a>         </li>         <li ng-class="{active: showfriendsphotos }">             <a href ng-click="show.friendsphotos()">friends photos</a>         </li>     </ul>      <div masonry reload-on-show ng-show="showmyphotos">         <div class="photo masonry-brick" ng-repeat="photo in myphotos">             <p class="title">{{ photo.title }}</p>             <img src="{{photo.image}}">             <p class="description">{{ photo.description }}</p>         </div>     </div>      <div masonry reload-on-show ng-show="showfriendsphotos">         <div class="photo masonry-brick" ng-repeat="photo in friendsphotos">             <p class="photoer">{{ photo.photoer }}</p>             <img src="{{photo.image}}">             <p class="title">{{ photo.title }}</p>             <p class="description">{{ photo.description }}</p>         </div>     </div>  </section> 

ok.. after staring have decide cheat little instead resetting $scope content each wall when tab clicked.. seeems work ok.

photoapp.controller('photowall', ['$scope', '$http', '$log',     function($scope, $http, $log) {         /* handle photos */         $http.get('/api/my-photos').success(function (data) {             $scope.myphotos = data;         });         $scope.$on('handleupdatemywall', function(event, obj) {             $scope.myphotos.unshift( obj );             $scope.$apply();         });          /* handle photos */         $http.get('/api/friends-photos').success(function (data) {             $scope.friendsphotos = data;         });          /* handle tabbed interface */         $scope.showmyphotos = true;         $scope.showfriendsphotos = false;         $scope.show = {             friendsphotos: function(){                 $scope.showmyphotos = false;                 $scope.showfriendsphotos = true;                 var tmp = $scope.friendsphotos;                 $scope.friendsphotos = [];                 $timeout(function(){                     $scope.friendsphotos = tmp;                 });             },             myphotos: function(){                 $scope.showmyphotos = true;                 $scope.showfriendsphotos = false;                 var tmp = $scope.myphotos;                 $scope.myphotos = [];                 $timeout(function(){                     $scope.myphotos = tmp;                 });             }         }      }]);