Services are the Javascript functions (stateless object) that are responsible to do some specific tasks. We can use service to share some data or functions throughout the application within a controller or between different controllers. Services can be used just by declaring dependencies or we can say, just by injecting them to the controllers.

Let's understand this with an example:-

HTML:-

<div ng-app="exampleapp">
//Binding the first controller using directive ng-controller

    <div ng-controller="DisplayController"> 
      <label for="country" class="col-sm-3 control-label" id="country_label">Country list</label>

//Populate a list of countries that is defined in the service by their names. Initiating the dropdown menu by the first value of the array object.

           <div class="col-sm-9 country">
              <select name="country" id="country" ng-model="country" class="selectpicker form-control country-code select-padding" ng-options="countryObj.id  as countryObj.name for  countryObj in countryList" ng-init = "country = countryList[0].id"></select>
           </div>
   </div>
    <hr/>

//Binding the second controller

    <div ng-controller="AddController">
      <label for="country" class="col-sm-3 control-label" id="country_label">Add Country</label>
           <div class="col-sm-9 country">

//This input box will display the corresponding id of the country that is selected.

          <input type="text" ng-model="country">

//Populate list by country description.

              <select name="country" id="country" ng-model="country" class="selectpicker form-control country-code select-padding" ng-options="countryObj.id  as countryObj.description for  countryObj in countryList" ng-init = "country = countryList[0].id"></select>
           </div>
   </div>
</div>

Below is the JS code:-

var exampleapp = angular.module("exampleapp", []);

//Creating a service that defines and returns an array object of countries which will be displayed in the dropdown through the controllers.

    exampleapp.service('exampleService', function () {
    var chooseCountries=[
        {id : 1, name : "US", description: "United States" },
        {id : 2, name : "CA", description: "Canada"},
        {id : 3, name : "AL", description: "Albania"}
    ];
    return chooseCountries; 
    });

// This is the first controller that takes the service as the dependency and displays the countries in the dropdown menu.  

function DisplayController($scope, exampleService) {
		$scope.countryList = exampleService;
}

// This is the second controller that will fetch the same list of countries from the service injected and will show the selected corresponding country id's in the input box .  

function AddController($scope, exampleService) {
    $scope.countryList = exampleService;
};
    
}

You can find the running code in the following fiddle:- https://jsfiddle.net/munmun/ag45z3oL/1/

I have injected the service 'exampleService'  to both the controllers 'DisplayController' and 'AddController'  so that the 'chooseCountries' can be used by them. It is a very easy process of using data(object,functions) or sharing the data between the controllers by simply adding it as a dependency for the component that depends on the service.