how to pass the value from one page to another page in angular?

Problem

I am starter of angular, when i am passing the value that i am entering into textbox i am able to see text="value" on header in pageA[\adminlogin] but when i am routing from one page to another page i am not able to see the same text on pageB[\dashboard] .In our application header is common for all pages.

/*pageA*/   
 $rootScope.accNo = function() {
    return $scope.AccountNumber;
 }

/*pageB*/   
  $scope.showAccNo = function() {
    return $scope.accno = $rootScope.accNo();
  }
<!-- `pageA` -->
 <div class="col-md-12">
      <input type="password" class="form-control" placeholder="#####"  ng-model="AccountNumber"/>
 </div>
<!-- `pageB` -->
  <p >Administrator Portal for:<strong>{{showAccNo()}}</strong></p>

Problem courtesy of: surya navuru

Solution

you can pass values to other controllers using angularjs service

angular.module('myApp', [])
    .service('sharedProperties', function () {
        var AccountNumber;

        return {
            getProperty: function () {
                return AccountNumber;
            },
            setProperty: function(value) {
                AccountNumber= value;
            }
        };
    });
function CtrlA($scope, sharedProperties) {
       sharedProperties.setProperty($scope.AccountNumber);
}

function CtrlB($scope, sharedProperties) {
       $scope.accno = sharedProperties.getProperty();
}


 <!-- `pageA` -->
 <div class="col-md-12">
     <input type="password" class="form-control" placeholder="#####"  ng-model="AccountNumber"/>
 </div>

<!-- `pageB` -->
<p >Administrator Portal for:<strong>{{accno}}</strong></p>
Solution courtesy of: URoy

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.