Share Data Between Controllers In Ionic Framework/angular Js

What is the best way of sharing data between controllers using services in AngularJS? For example, when the user selects an item from the in services.html, I'd lik

Solution 1:

angular.module('starter.services', [])

.service("ServicesData", [function () {

    var servicesData = [
        { 
            title: 'Car Repair and Maintenance', 
            total: 7, 
            id: 1 
        },
        { 
            title: 'Cleaning', 
            total: 1, 
            id: 2 
        },
        { 
            title: 'Delivery, Storage and Moving', 
            total: 6, 
            id: 3 
        }
    ];

    return {
        getSelected: function(serviceId) {
          var selectedService;
          
          servicesData.forEach(function(service) {
            if(service.id === serviceId) {
              selectedService = service;
            }
          });
          
          return return selectedService;
        },
        getServices: function () {
            return servicesData;
        }
    }
}])

.controller('ServicesCtrl', ["$scope", "ServicesData", function($scope, ServicesData) {
  $scope.services = ServicesData.setServices();
}])

.controller('ServiceCtrl', function($scope, $stateParams) {
  $scope.service = ServicesData.getSelected($stateParams.service);//the param name should be defined in the route config
});

<!--services.html-->

    <ion-list>
        <ion-item ng-repeat="service in services" href="#/app/services/{{service.id}}" class="item-icon-right">
            {{service.title}} 
            <i class="icon ion-chevron-right icon-accessory">
                <span class="badge badge-positive">{{service.total}}</span>
            </i>
        </ion-item>
    </ion-list>

<!--service.html-->

<ion-view view-title="Playlist">
    <ion-content>
        <h1>{{service.name}}</h1>
    </ion-content>
</ion-view>