Windows Phone Panorama with AngularJS

Question

I am trying to replicate the Windows Phone Ui in an AngularJS app. Here is an example of what a Windows Phone Ui looks like.

Infinite Swipe

One interesting thing about it is the panels are infinitely swipe-able. You can keep swiping and end up back at the first panel.

To achieve the infinite swipe, I duplicate the first and last panels and add them before and after the original panels like this:

If you swipe to a copied panel (like "3" or "1"):

you are redirected to the real panel immediately after the swipe finishes. This happens without the user even knowing because there is no animation.

Problem

The problem is that the panels can have ng-controller, ng-repeat, ng-model, or any number of things that create scope within them. When I duplicate the markup a new scope is created that starts out identical to the original but does not stay in sync. How do I keep the panel data in sync?

OR, is there another way to achieve this that does not involve duplicating markup?

Ideas

1. One idea I had was moving the DOM elements around instead of duplicating. I noticed significant lag with this strategy and if there are only two panels, this breaks down because the non-selected panel either needs to go before the current panel or after.This was not acceptable to me because of the perceived performance loss
2. Another option is delaying the movement of the panel contents until after the swipe is completed. You would still see the panel titles, but the content would be invisible until you finish swiping. Then, I can determine which panel is now current and animate it coming in from the proper direction (depending on the direction of the swipe).
3. A third option is using blank panels with a loading spinner as the "duplicated" or buffer panels. If you swipe to a panel that is not one of the originals, you would see a flash of the loading spinner until you are moved to the actual panel.

None of these options are ideal, so I'm looking for other ideas. But if there aren't any good options, #2 seems like the best plan to me.

Answer 1

This appears to be a question about sharing state between different instances of a controller (the 'real' 1 panel and the 'fake' "1" panel) and it has been asked before....

I have two divs with the same ng-controller in AngularJS, how can I make them share information?

I like the answer suggesting a service to share state between instances...

var app = angular.module('myapp', []);

app.service('myservice', function(){
    this.data = "Hi, I'm shared"
});

app.controller('mycontroller', ['$scope', 'myservice', function ($scope, myservice) {
    $scope.setData = function(newData){myservice.data = newData};
    $scope.getData = function(){return myservice.data};
}]);

Here is a working fiddle that demonstrates the approach

http://jsfiddle.net/michaeldausmann/WMPv3/#base

Michael