angular ui-grid save prepopulated values from a different scope object

Question

I have 2pages(section1, section2) sharing the same controller. When I enter values in section1, the values are stored in sessionstorage and I'm able to retrive and display it in section2 grid. However, this value does not get stored in the section2 object. I want it to be able to save the values coming from section1 in section2 object so that I can populated a summary page with section1 and section2 values populated in ui-grid. Currently the values in section2 show as empty as its not being saved in the scope object.

Update:

Note this question is more of how to save the data populated(without any user edits) in ui-grid row in a ui-grid way.

ui-grid for section1:

$scope.section1 = { 
            enableCellEditOnFocus: true, 
            enableCellEdit:true, 
            enableSorting: false,
            rowHeight:55,
            enableHorizontalScrollbar : uiGridConstants.scrollbars.NEVER,
            enableVerticalScrollbar   : uiGridConstants.scrollbars.NEVER,
            columnDefs:[{
                    field: 'piidata',
                    displayName:'PII or Firm Sensitive Data'
            },
            {   
                    field: 'location',
                    displayName: 'Location'
            },
            {
                    field:'risklevel',
                    displayName: 'Risk Severity Level',
                    editType: 'dropdown',
                    enableCellEdit:true,
                    editableCellTemplate: 'ui-grid/dropdownEditor',
                    editDropdownOptionsArray: $scope.levels,
                    editDropdownIdLabel: 'option',
                    editDropdownValueLabel: 'option'
                }],
                onRegisterApi: function(gridApi) {
                     grid = gridApi.grid;
              }

        };

ui-grid for section2:

        $scope.section2 = { 
            enableCellEditOnFocus: true, 
            enableCellEdit:true, 
            enableSorting: false,
            rowHeight:55,
            enableHorizontalScrollbar : uiGridConstants.scrollbars.NEVER,
            enableVerticalScrollbar   : uiGridConstants.scrollbars.NEVER,
            columnDefs:[
                {
                        field: 'piidata',
                        displayName:'PII or Firm Sensitive Data',
                        cellTemplate : '<div >{{grid.appScope.piidata()}}</div>'
                },
                {   
                        field: 'location',
                        displayName:'Location',
                        cellTemplate : '<div >{{grid.appScope.location()}}</div>'
                },
                {
                        field:'risklevel',
                        displayName: 'Risk Severity Level',
                        cellTemplate : '<div>{{grid.appScope.risklevel()}}</div>'
                }
            ],
            onRegisterApi: function(gridApi) {

              }

        };

Sessionstorage values:

$scope.piidata = function (){
                return $sessionStorage.section1.data[0].piidata;
            }

            $scope.location = function (){
                return $sessionStorage.section1.data[0].location;
            }


            $scope.risklevel = function (){
                return $sessionStorage.section1.data[0].risklevel;
            }

Answer 1

You have couple options to get the values to the scope of the section2.

1. You said you are able to get it into the localstorate. Then you could just in the beginning of the shared controller get those values from the localstorage, and save them in the scope.

2. Use rootScope to store those values. First, add $rootScope as a dependency, and then just use that scope to store the values. There they will remain when you switch to section2

3. Use a service to store the scope values. Then in the beginning of the controller, just ask from that service (use a factory as the service type). Those values will be updated in both sections, since they use the same controller.

Out of all these options, I could say option 3 might be the most angular way. Option 2 should be avoided if possible, since adding stuff to the rootScope is not seen as good design. Option 1 is good if you need to store the info for longer than the session time. So even if the user closes the browser, the data will remain in the localStorage.