Sharing data between pages in ionic

Question

I am working on an ionic project.I want to share data between pages. Below is what I have done. But it is not working.Can some one tell me what I am doing wrong.I let the user to add the data to my reminder.html page and I want to show that added data in my meds.html.

This is my services.js


.factory('Authorization', [function() {
 
  authorization = {};
  authorization.drug = "";
 
  return authorization;
}]);





This is my controller.js 


.controller('reminderCtrl', ['$scope', '$stateParams','Authorization'
function ($scope, $stateParams,Authorization) {
//$scope.user = Authorization;

}])


.controller('medsCtrl', ['$scope', '$stateParams','Authorization', 
function ($scope, $stateParams,Authorization) {
//$scope.user = Authorization;

}])




This is my app.js

controller('medsCtrl', function($scope,  Authorization) {
  $scope.user = Authorization;  
})

.controller('reminderCtrl', function($scope,  Authorization) {
  $scope.user = Authorization;  
})

This is my reminder.html. The page that I used to add data.
<button class="button button-royal icon ion-android-done" ng-click = "add(user)" ></button>
  </ion-nav-buttons>
  <ion-content padding="true" class="has-header">
    
    <form id="reminder2-form7" class="list">
      <label class="item item-input" id="reminder2-input9" >
        <input type="text" placeholder="Drug" ng-model = "user.drug" >
      </label>
    



This is my meds.html page .This is the page that I want to show the data that I was added to the reminder.html.


<ion-view title="Meds" id="page14">
  <ion-nav-buttons side="right" class="has-header">
    <button class="button button-royal icon ion-android-add-circle"></button>
  </ion-nav-buttons>
  <ion-content padding="true" class="has-header">
    <ion-list id="meds-list6">
      <label class="item item-input" id="meds-search3">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="search" placeholder="med name">
      </label>
      <ion-item class="item-thumbnail-left dark" id="meds-list-item21">
        <img src="img/CynoZgjCQlSOdh14y24s_drug-disposal.jpg">
        <h2dark>Metformin
          <p>for diabetes</p>
        </h2dark>
      </ion-item>
      <ion-item class="item-thumbnail-left" id="meds-list-item22">
        <img src="img/ZVN6KzlgTP2WdrghQtCH_images.jpg">
        <h2>Drug:{{user.drug}}</h2>
      
      </ion-item>
    </ion-list>
    <a ui-sref="medDiary2" id="meds-button7" class="button button-royal  button-clear icon ion-android-add-circle"></a>
    <a ui-sref="searchMeds" id="meds-button10" class="button button-royal  button-clear icon ion-android-search"></a>
    <a ui-sref="reminder" id="meds-button25" class="button button-royal  button-clear icon ion-android-alarm-clock"></a>
  </ion-content>
</ion-view>

Answer 1

You can use $broadcast in reminderCtrl controller

$scope.addData = function () {
    var addObj = {};
    // your logic here
    $rootScope.$broadcast('add-event', { addedObject: addObj });
}

and listen back to previous event using $on in medsCtrl controller

$scope.$on('add-event', function(event, args) {
   var addedObject = args.addedObject;
   // Do what you want to do with passed object
   console.log(addedObject)
});