Can I set this.'something' of a service wi

Question

I have the following service (it actually has more levels and elements but I trimmed it down to just a single example of what I'd like to work). It creates javascript objects within other objects dynamically based on csv files in the app.data folder. The line most relevant to this question is this.images = images; after the inner-most for loop.

app.service('tabInfoService',function(csvService, tabsService ){


    var tabData = tabsService.tabData;
    var tabCount = tabsService.tabCount;
    this.tabs={};
    this.images={};

    var tCounter = 0;
    //for loop creates a big object literal with more object literals inside of it 
    for (tCounter=0; tCounter<tabCount; tCounter++){
        var tabImageURL = "Contents/Product Groups/"+tabData[tCounter]+"/imageOrder.csv";
        var TabImages = $.getCsvArray(tabImageURL); //gets array from csv file
        var images={};

        this.tabs["tab"+tCounter] ={
            title: tabData[tCounter],  

            images : (function(){
                                        for (imageCounter = 0; imageCounter<TabImages.length; imageCounter++)                                                   
                                        images["image"+imageCounter]    ={
                                            image: "Contents/Product Groups/"+tabData[tCounter]+"/img/"+TabImages[imageCounter]

                                        };
                                        this.images=images; //can I make something like this so that I'll have access in my controller?
                                        return images;
                            })(),

        }
    }   
});

How can I make something like this.images = images; work inside the nested javascript objects so that I can access this images object in my controller with something like $scope.images = tabInfoService.images ?

Currently I can do $scope.navItems = tabInfoService.tabs in my controller and have access to the large object as a whole. This allows me to nest ng-repeat divs (repeating something in navItems, and then somethingElse within that something) in order to repeat all the elements of this images object.

So basically, I can access the tabInfoService.tabs object and dig into it to get the images I want by nesting ng-repeats in the HTML. The app works fine with this, but I'm having issues initializing the data in the controller. Can I set a new this.something (in this case this.images) for tabInfoService so I can set a $scope variable to it?

Long story short: I want to do $scope.initialImage=tabInfoService.images[image0] but I can't set tabInfoService.images within the nested object in my service. Any way to do this?

Should I move this all to the controller?

Thank you very much for your time. I really appreciate it.

Answer 1

You'll want to make a deep copy of the object. One option is to use angular.copy.

angular.copy(images, this.images);

example plnkr - see lines 36 vs 37.