AngularJS: how to assign a maintenance method to the $ scope and ng-repeat (it) controller in view?

Question

I am trying to separate the functionality from the controller and put it in the service so that I can use it in several controllers without adding the same functions for different controllers.

My original controller, before trying to configure it using a service, worked fine and looks like this (colorController.js):

colorController.js

(function() {

  angular
    .module('evolution')
    .controller('ColorController', ColorController);

  ColorController.$inject = ['$scope', '$http'];

  function ColorController($scope, $http){
    $scope.range = function(max, min, step){
      step = step || 1;
      var input = [];
      for (var i = max; i >= min; i -= step) input.push(i);
      return input;
    };

  };


})();

And below is the code that I am trying to share with the service and the new controller.

rangeService.service.js

(function() {

  angular
    .module('evolution')
    .service('RangeService', RangeService);


  function RangeService(){

    this.range = function(max, min, step){
      step = step || 1;
      var input = [];
      for (var i = max; i >= min; i -= step) input.push(i);
      return input;
    };

  };


})();

rangeController.js

(function() {

  angular
    .module('evolution')
    .controller('RangeController', RangeController);

  RangeController.$inject = ['$scope', '$http', '$log', 'RangeService'];

  function RangeController($scope, $http, $log, RangeService){

    $scope.range = function() {
      $scope.result = RangeService.range();
      return $scope.result;
    }

    console.log($scope.range());   
  };


})();

The output above console.log ($ scope.range); empty array []

If I pass some RangeService argument, for example:

$scope.result = RangeService.range(100,96); 

then I can see the correct output in the browser.

, colors.html, :

<div class="color_column_row" ng-repeat="n in range(100,50, 5)">

html-.

, , - ng-controller = "ColorController" ng-controller = "RangeController"

colors.html

<div class="col-xs-12 col-sm-3" id="color_column_white_container" ng-app='evolution' ng-controller="RangeController">

  <h1 class="evo-header-5 reverse">Light Translucent Colors</h1>

  <div class="color_column_row" ng-repeat="n in range(100,50, 5)">
    <div class="color_swatch_bar evo-light-{{ n }}-bg">
      <span class="tag">evo-light-{{ n }}</span>
      <span class="tag">{{ n }}%</span>
    </div>
  </div>

</div>

Answer 1

rangeController.js. RangeService.range. RangeController

$scope.range = function(max, min, step) {
  $scope.result = RangeService.range(max, min, step);
  return $scope.result;
}

Answer 2

RangeService.range(), max min undefined.

, .apply() $scope.range() :

(function() {

  angular
    .module('evolution')
    .controller('RangeController', RangeController);

  RangeController.$inject = ['$scope', '$http', '$log', 'RangeService'];

  function RangeController($scope, $http, $log, RangeService){

    $scope.range = function() {
      $scope.result = RangeService.range.apply(RangeService, arguments);
      return $scope.result;
    }

    console.log($scope.range()); // this will always be empty, 
           // you need to specify at least 2 arguments for max and min
  };


})();