how to display barcode scan result on html instead of an alert in angularjs + Ionic

Hi I am working one of my project Inventory management, where user scan the any product barcode and get the value and use it. I have successfully achieved that using following code:

.controller('ScanCtrl', function($scope, $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) {
                alert("We got a barcode\n" +
                    "Result: " + result.text + "\n" +
                    "Format: " + result.format + "\n" +
                    "Cancelled: " + result.cancelled);
            }, 
            function (error) {
                alert("Scanning failed: " + error);
            }

        );
     }, 1000, false);
 }

Using above code I got scan result in alert pop-up box that is absolutely fine but new requirement comes in so the scan result should show on a page instead of alert pop-up box. I have used following method to achieve that:

.controller('ScanCtrl', function($scope, $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) {
               $scope.barcoderesults = [{
                    Result: result.text,
                    Format: result.format,
                    Cancelled: result.cancelled
                }];

                $state.go('page.scan-detail');
                /*alert("We got a barcode\n" +
                    "Result: " + result.text + "\n" +
                    "Format: " + result.format + "\n" +
                    "Cancelled: " + result.cancelled);*/
            }, 
            function (error) {
                alert("Scanning failed: " + error);
            }

        );
    }, 1000, false);
  }
})

And I am using the following code in my app.js code:

.state('page.scan', {
  url: '/scan',
  views: {
    'page-main': {
      templateUrl: 'templates/pages/scan.html',
      controller: 'ScanCtrl'
    }
  }
})

.state('page.scan-detail', {
  url: '/scan-detail',
  views: {
    'page-main': {
      templateUrl: 'templates/pages/scan-detail.html',
      controller: 'ScanCtrl'

    }
  }
})

In scan-detail page I am using following html:

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

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

Problem: After pressing start scan button (using ng-click="startScan()") it goes to a new page but no scan result is show there. Once again I press start scan button on a new page (scan-detail) it scans and result appeared on the page. I tried lot of things but didn't got result in first time. Can some one help me on this I am new in AngularJS I hope there would some way to do that.

Thanks in Advance.

Note: I am using Cordova, AngularJS & Ionic.