How to pass object array from one controller to another?

Question

I'm new to angularJS and I have one problem

I have

<div class="item-hover circle effect1" data-ng-repeat="order in Bands">
    <a ng-click="getPerson(order)">
        <div class="spinner"></div>
        <div class="img">
            <img src="http://onthedoor.blob.core.windows.net/photos/{{ order.PosterPicId }}/fullheight.png" alt="img">
        </div>
        <div class="info">
            <div class="info-back">
                <h3>{{ order.BusinessName }}</h3>
                <p>{{ order.Genre1 }}</p>
                <p>Click to know more about this band</p>
            </div>
        </div>
    </a>
</div>

Here I have a huge data in order what I want is when user clicks on the ng-click="getPerson(order)" I want to pass that order to another page which will display more details about that bands EG. tracks, gigs etc.

Here's what my bands controller looks like

'use strict';
app.controller('bandsController', ['$scope', 'bandsService', function ($scope, bandsService) {

    $scope.orders = [];

    bandsService.getBands().then(function (results) {

        $scope.Bands = results.data;
        console.log(results.data)
        $scope.getRandomSpan = function () {
            return Math.round( Math.random() * (19 - 1) + 1);;
        }

    }, function (error) {
        //alert(error.data.message);
    });
    $scope.getPerson = function (band) {
        $scope.$broadcast("band", band);
    };

}]);


function DetailCtrl($scope, $location) {
    $scope.$on("band", function (event, person) {
        $scope.person = person;
    });
}

I've no idea how this could be done I have read some posts but it only appearing the informations about passing the variables but I want to pass that particular object to another controller so I don't have to request again to server and can reduce the Speed.

So, what I need is when user clicks I want to take that object pass it to another page's controller and bind that informations I have no idea about how to redirect and gets that object.

Thanks.

Update

app.factory('myService', ['$http', 'ngAuthSettings', function ($http, ngAuthSettings) {
    var savedData = {}
    function set(data) {
        savedData = data;
    }
    function get() {
        return savedData;
    }

    return {
        set: set,
        get: get
    }

}]);

I'm passing data into myservice here

app.controller('bandsController', ['$scope', 'bandsService', function ($scope, bandsService) {

    $scope.orders = [];

    bandsService.getBands().then(function (results) {

        $scope.Bands = results.data;
        console.log(results.data)
        $scope.getRandomSpan = function () {
            return Math.round( Math.random() * (19 - 1) + 1);;
        }
        myService.set(results.data)
        $scope.doComplete = function () {
            $('.clickBands').click(function () {
                alert('');
            })
        }
        $scope.message="jhi";
        $scope.clickFunction = function () {
            $scope.$broadcast('update_parent_controller', $scope.message);
        };

        //myService.set(yourSharedData);




    }, function (error) {
        //alert(error.data.message);
    });

}]);

Currently its throwing exception like myservice is not defined I don't know what I'm doing wrong. What I want to is to redirect banddetails controller and also to have a data in this my service

Answer 1

If you just want a simply and bullet response:

1) You can inject $rootScope module and store in that your variables, you can use a MainController in your body too.

2) Just use an $emit that sends data, and use $on to retrieve data.

However if you need to pass arrays from one controller to another try to think out how to architect better your code, $emit is not very appreciable since it uses $watch (very heavy module) on its source.

I just don't like to use services to store simple data, as per a better architecture services must only abstract API calls (or even mock objs)

Answer 2

One possibility is to have a service which will store the instance of this object:

app.service('myService', function() {
    this.myData = [];

    this.setMyData = function(myData) {
        this.myData = myData;
    };

    this.getMyData = function() {
        return this.myData;
    };
});

Now simply inject the service in both controllers. In the first controller, just before redirecting to the second controller assign the value and in the second controller read the value from the service. Think of the service as a singleton store for your application where you could keep some state in-memory.