title: AngularJS: how to assign service method to controller $scope and ng-repeat (it) in view?
body: <p>I'm trying to separate functionality from controller and put it in service so I can use it in multiple controllers without adding same piece of functionality across different controllers.</p>
  
  <p>My original controller, before I was trying to configure it with service, was working fine and looks like this one below (colorController.js):</p>
  
  <p>colorController.js</p>
  
  <pre><code>(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 &gt;= min; i -= step) input.push(i);
        return input;
      };
  
    };
  
  
  })();
  </code></pre>
  
  <p>And bellow is the code that I attempt to separate it with service and new controller</p>
  
  <p>rangeService.service.js</p>
  
  <pre><code>(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 &gt;= min; i -= step) input.push(i);
        return input;
      };
  
    };
  
  
  })();
  </code></pre>
  
  <p>rangeController.js</p>
  
  <pre><code>(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());   
    };
  
  
  })();
  </code></pre>
  
  <p>Output of above console.log($scope.range); is empty array []</p>
  
  <p>If I pass some argument to RangeService, like this: </p>
  
  <pre><code>$scope.result = RangeService.range(100,96); 
  </code></pre>
  
  <p>then I can see correct output in the browser.</p>
  
  <p>Now I just need those arguments to be executed within colors.html as shown in below code: </p>
  
  <pre><code>&lt;div class="color_column_row" ng-repeat="n in range(100,50, 5)"&gt;
  </code></pre>
  
  <p>And below is html code. </p>
  
  <p>All I changed in here is from ng-controller="ColorController" to ng-controller="RangeController"</p>
  
  <p>colors.html</p>
  
  <pre><code>&lt;div class="col-xs-12 col-sm-3" id="color_column_white_container" ng-app='evolution' ng-controller="RangeController"&gt;
  
    &lt;h1 class="evo-header-5 reverse"&gt;Light Translucent Colors&lt;/h1&gt;
  
    &lt;div class="color_column_row" ng-repeat="n in range(100,50, 5)"&gt;
      &lt;div class="color_swatch_bar evo-light-{{ n }}-bg"&gt;
        &lt;span class="tag"&gt;evo-light-{{ n }}&lt;/span&gt;
        &lt;span class="tag"&gt;{{ n }}%&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>