how to make my array to access in services

Question

Here i use ionic framework and angularjs, I have a servces like

app.service('MyService',function($scope){
  var value = $scope.product;
  return value;
});

and my controller is

app.controller("firCtrl",function($scope,$state,MyService){

  $scope.product = ['gopi','dinesh','vasu','prasanth'];
  //MyService.value = $scope.product;
  console.log($scope.product);
    $scope.doClick = function(){
      console.log('invoke');
      $state.go('second');
    };
});

my second controller is

app.controller("secCtrl",function($scope,MyService){
   $scope.product2 = MyService.value;
});

here i have value in my product and this value is displayed in a first page and i have a button in fist page to show the value in product to second page. I'm not getting any idea for viewing my array in list in the second page.

when i use ng-repeat in the first page i am able to display the value and my button but when I click the button i am not able to view the data in the second page

Answer 1

First thing you can't inject $scope inside service factory function, that is only available in controller & directive link function.

Service

app.service('MyService',function(){
  var data = []; //private data
  var self = this;
  //data getter
  self.getData = function(){
    return data;
  }
  //data setter
  self.setData = function(value){
    data = value;
  }
});

Then controller will do setData method to set data a sharable

MyService.setData($scope.product)

And then you could access that shareable data by calling data getter

app.controller("secCtrl",function($scope,MyService){
    $scope.product2 = MyService.getData();
});