Q:

What is the proper way to implement a reusable JavaScript object used in AngularJS controllers? 

I am still learning the Angular ropes and would like some guidance on the following...
I have several KendoUI-related data source definitions that I would like to reuse in various AngularJS controllers. 
Currently in one controller, I have:
var dataSource = new kendo.data. DataSource({ ... });

Since I will have a few data sources, I can place them in something like a globalFunctions.js file:
var dataSource1 = new kendo.data. DataSource({ ... });
var dataSource2 = new kendo.data. DataSource({ ... });
var dataSource3 = new kendo.data. DataSource({ ... });

Then get an instance of the required data source from within my Angular controller. 
Since I don't want to load up all data sources for each page (or even need them to be available), would it be better to create a separate data source file for each data source, then inject 1..* into whichever controller needs them, and new-up as needed? 
I would like to know the 'proper' way of implementing this with AngularJS. 

A:

Use a service to share data between controllers. 

https://egghead.io/lessons/angularjs-sharing-data-between-controllers
What's the correct way to communicate between controllers in AngularJS?