can I work with angular js ng-repeat and turn.js?

Question

I'm trying to make a magazine using turn.js and angular.js

I'm using angular to parse the json file and extract the image path for using it in a $scope variable in my view with ng-repeat and the turn.js to make the flipbook animation to make the div look like a magazine.

But it doesnt generate the flipbook and just draw the images one after other.

Please help! I put the code right here

HTML

       <div id="flipbook" class="flipbook"ng-repeat="slide in slides">
        <div><img src="{{slide.path_main}}"></div>
       </div>      


</div>

Flipbook init

   $("#flipbook").turn({
        width: 1724,
        height: 772,
        autoCenter: true
    });

Answer 1

I don't believe there is a renderComplete event or anything like that in angular; you may have to use $timeout as suggested here.

// i'm taking assumptions with your code, but...

$scope.slides = [];

$http.get('/data/slides.json').success(function(data){

  $scope.slides = data;

  $timeout(function(){

    $("#flipbook").turn({
      width: 1724,
      height: 772,
      autoCenter: true
    });

  }, 0);

});

Answer 2

I figure it out by adding the ngrepeat in the inner div of the flipbok! It was such a silly thing but now I have my flipbook perfct!