How to append multiple scanned barcode result data in a page using AngularJS

I have a application in which I have to scan a barcode and show it to other page. The Initially requirement was for one product only but now the requirement is to show multiple scanned barcode result in existing div. I have managed to show for one product barcode scan result in a page using following code in my controller.js:

.controller('ScanCtrl', function($scope, $rootScope, $state, $ionicLoading, $timeout) {
$scope.title = "How to scan an inventory";

$scope.startScan = function() {
    $ionicLoading.show({
        template: 'Scanning Barcode....'
    });

    $timeout(function() {
        $ionicLoading.hide();
        window.cordova.plugins.barcodeScanner.scan(
            function (result) {

                $rootScope.barcoderesults = [{

                    Barcode: result.text

                }];

                alert('We got a barcode');
                $state.go('page.scan-detail');

                /*if($scope.startScan){
                    $rootScope.barcoderesults.push({Barcode:$rootScope.barcoderesults});
                    $rootScope.barcoderesults = '';
                };*/

            }, 
            function (error) {
                alert("Scanning failed: " + error);
            }

        );
    }, 1000, false);
}

})

and this is my html page where I am calling that barcoderesults variable using ng-repeat:

<ion-view title="Scan Result">
  <ion-content class="has-header padding-top">
    <div class="card">
      <div class="item item-text-wrap">
        <div ng-repeat="barcoderesult in barcoderesults">Barcode: {{barcoderesult.Barcode}}</div>
     </div>
     <div class="item item-content">
    <!-- Scan Button -->
      <button class="button button-block button-assertive" ng-click="startScan()">Continue Scan</button>
      <center><h3>OR</h3></center>
      <button class="button button-block button-calm" ng-click="">Checkout</button>
    </div>
  </div>

  </ion-content>
</ion-view>

Now the scenario is after scanning the barcode from screen 1 I navigate to screen 2 where I show the result and in screen 2 I have Continue Scan button, which is using the same function ng-click="startScan()". I was trying following code in my same controller to show multiple results but couldn't achieved:

if($scope.startScan){
                    $rootScope.barcoderesults.push({Barcode:$rootScope.barcoderesults});
                    $rootScope.barcoderesults = '';
                };

Can some one please help me on this as I am new in AngularJS. I am using AngularJS + Ionic + Cordova. Many thanks in advance.

First of thisngs: if you need to share some state between controllers, then you need to save this state in service (there are more options with nested controllers, but this not such case). So, you need a servie which should do scanning and holds scanned barcodes:

(function() {
  angular.module('myApp')
    .factory('barcodeService', ['$q', '$timeout', '$window',
      function($q, $timeout, $window) {
        var scanTimeout = 1000,
            barcodes = [];

        return {
          barcodes: barcodes,
          scanBarcode: scanBarcode
        };

        function scanBarcode() {
          var deferred = $q.defer();

          var rejectByTimeout = $timeout(function() {
            deferred.reject('timeout rejection');
          }, scanTimeout, false);

          $window.cordova.plugins.barcodeScanner.scan(
            function(result) {
              deferred.resolve(result);
            },
            function(error) {
              deferred.reject(error);
            });

          return deferred.promise.then(function(barcode){
            if(barcodes.indexOf(barcode) == -1){
              barcodes.push(barcode);
            }

            return barcode;
          });
        }
      }
    ]);
}());

Also, let's create custom directive for invoking barcode scan to prevent polluting controllers:

(function() {
  angular.module('myApp').directive('barcodeScan', ['$log', 'barcodeService',
    function($log, barcodeService) {
      return {
        restrict: 'AE',
        replace: true,
        template: "<button ng-click='doScan()' >Scan Barcode</button>",
        link: function(scope, element, attrs) {
          scope.doScan = function() {
            barcodeService.scanBarcode()
              .then(function(barcode) {
                $log.info('Barcode scan succeeded with result: ' + barcode);
              }, function(error) {
                $log.error('Barcode scan failed with error: ' + error);
              });
          };

          if (attrs.initialScan.toLowerCase() === 'true') {
            scope.doScan();
          }
        }
      };
    }
  ]);
}());

With this two pices in place you can write your controller as:

(function() {
  angular.module('myApp').controller('HomeController', 
  ['$scope', 'barcodeService',
    function($scope, barcodeService) {
      $scope.barcodes = barcodeService.barcodes;
    }
  ]);
})();

and view template: 

<div ng-controller='HomeController'>
  <barcode-scan barcodes='barcodes' initial-scan='true' ></barcode-scan>
  <hr />
  <ul ng-repeat='barcode in barcodes' >
    <li ng-bind='barcode'></li>
  </ul>
</div>

Draw your attention on initial-scan attribute of the barcodeScan directive. When this attribute has true value, barcode scanning initiated immediately after directive loaded into view. Actually, you can put this directive onot a screen 2 and remove screen 1 at all. All the way, with single screen 2 or both screen 1 and screen 2, barcodes will be shared between controllers.

Plunker here

Also, as an additional option, you can use barcodeService.scanBarcode method for resolve option of screen 2 route. This way, when user will be navigated on screen 2, it's controller will receive scanned barcode: Plunker with screen2 route resolve