Appgyver Steroids, updated object in Web View won't show

Question

I'm developing a HTML5 mobile app with Appgyver Steroids and AngularJs. The app is using a global javascript object to fill with info along the steps and is used by the whole application. Everything was working great until I needed to create a gallery.html and push it as a web layer from my main controller. The main.html and gallery.html got their own controllers. Gallery.html display all the pictures as expected from the javascript object and when I remove them they being removed also from the javascript object, as expected. But, when I return to the main.html and click "gallery" they are all there again in gallery.html.

I figure there must be a scope problem or a matter of multiple instances? How do I get gallery.html to read the actual object (the one with no pictures after all being removed)? Why is gallery.html not updating its values? I've been running the code and it is nothing wrong with it, but when I use it in a web layer, this happens.

In main controller:

$scope.gallery = function(roomId, detailId) {
    pictures = inspectionService.getPictures(roomId, detailId);

    if (pictures.length > 0) {
        webView = new steroids.views.WebView("/views/inspection/gallery.html?roomId=" + roomId + '&detailId=' + detailId);
        steroids.layers.push(webView);
    } else {
        this.camera();
    }
};

In gallery controller:

function init(){
    roomId = steroids.view.params.roomId;
    detailId = steroids.view.params.detailId;
    updateGallery();
}

//UPDATING GALLERY
function updateGallery() {
    $scope.pictures = inspectionService.getPictures(roomId, detailId);
    $scope.info = inspectionService.getRoom(roomId).name + ": " + inspectionService.getDetail(roomId, detailId).name;
};

//REMOVE PICTURE
$scope.removePicture = function(pictureUri) {
    inspectionService.removePicture(roomId, detailId, pictureUri);
    updateGallery();

    if (pictures.length <= 0) {
        steroids.layers.pop();
    }
};

Answer 1

AppGyver employee here! The WebViews in Steroids are separate "browser" instances, each with their own DOM and JavaScript runtime. I wrote a quick guide on the subject, check it out: http://guides.appgyver.com/steroids/guides/steroids-js/sharing-data-between-webviews/

Basically, you need to ensure that the inspectionService state is maintained between your different views – the last section in the guide about using a background HTML WebView should be useful!