How can data be effectively shared between controllers using services in AngularJS?
For instance, when a user selects an item from the <ion-list> in services.html, the goal is to display the title of the selected item in service.html. The code snippet {{service.name}} illustrates what I am trying to accomplish.
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>
controller.js
.controller('ServicesCtrl', ["$scope", "ServicesData", function($scope, ServicesData) {
$scope.services = ServicesData.GetServices()
}])
.controller('ServiceCtrl', function($scope, $stateParams) {
});
services.js
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 {
GetServices: function () {
return servicesData;
},
GetServiceById: function () {
// do stuff here to get the service by id
}
}
}])