Ionic: Passing array elements between controllers

I have a controller & view which computes and displays a specific element. When I click a button on the view, I want to open another which shows more information about the item.

What is the best way to pass the element to another controller for display?

Many thanks

You could build a service which get data from one controller and passing it to the other, like so:

.factory('shareData', function(){

    var finalData;
    return {
        sendData: function(data) {
            finalData = data;
        },
        getData: function() {
            return finalData;
        }
    }
});

Another option you have is to create a shared varraible in your main controller('app' controller in ionic)

.controller('app', function($scope){
    $scope.data;
})
.controller('app.controller1', function($scope){
    $scope.data = "Hello World";
})
.controller('app.controller2', function($scope){
    console.log($scope.data); //Hello World
});

Yet another option besides those included by Matan Gubkin is including the array in the $rootScope: this way you will be able to access it from everywhere.

@Matan Gubkin idea is close, but you should use the service to get the specific item that you desire.

.factory('shareData', function(){

  var finalData = ["Hello World",'more data'];

  return {
    sendData: function(data) {
        finalData = data; 
    },
    getData: function() {
        return finalData;
    },
    getItem:function(_id) {
       return finalData[_id];
    }
  }
});

then in setting up your controllers

.controller('app.controller', function($scope){

})
.controller('app.controller-list', function($scope,shareData){
    $scope.data = shareData.getData();
})
.controller('app.controller-detail', function($scope,$stateParams,shareData){
    // use stateParams to get index
    console.log(shareData.getItem($stateParams.index)); //
});

setting up your routes

.config(function($stateProvider, $urlRouterProvider) {
 $stateProvider

  .state('app', {
    url: "/app",
    abstract: true,
   controller: 'app.controller'
  })

  .state('app.controller-list', {
    url: "/list",
  })

  .state('app.controller-detail', {
    url: "/detail/:index", // <-- pass in index as stateParam
  });
   // if none of the above states are matched, use this as the fallback
   $urlRouterProvider.otherwise('/app/list');
});