Angular Access scope data to factory?

Question

I have a situation where i am getting data on scroll from a service. Now i need to filter data using popular data and latest post

Here is my service:

App.factory('Serviec', function ($http, $rootScope) {
    var Hututoo = function () {
        this.items = [];
        this.busy = false;
        this.after = 'Serviec_0';
    };

    Serviec.prototype.nextPage = function () {
        if (this.busy) return;
        this.busy = true;
        // return undefined  
        console.log($rootScope.listtype);
        $http.get(baseurl + 'ajax/gethome?after=' + this.after).success(function (data)               {
            var items = data;
            for (var i = 0; i < 5; i++) {
                this.items.push(items[i]);
                // debugger;
            }
            this.after = "Hututoo_" + this.items.length;
            this.busy = false;
        }.bind(this));
    };
    return Serviec;
});

In controller:

$scope.data= new Serviec();

$scope.listtype= 'latest';
$scope.changelist = function(str){    
       $rootScope.listtype = str;   
   $scope.data.items=[];            
   $scope.data.after = 'Serviec_0';           
         $http.post(baseurl+"ajax/gethome","after="+$scope.hututoo.after+"&list="+str).success(function(data){
            $scope.data.items = data;
           }); 
}

Html

<li ng-click="expression = 'latest';changelist('latest');" ng-class="{latest_icon:expression == 'latest'}">Latest Hoot</li>
<li ng-click="expression = 'popular';changelist('popular');" ng-class="{popular_icon:expression == 'popular'}">Popular Hoots</li>

So with these click i need to order data .I have to make http call to get data according to user click.

I was thinking that i can make a scope data that define listing type and get it in factory.

How can i inject this scope in Serviec Factory. I have tried it using rootscope. initally list type is set to latest , but it shows undefined. So what would be the best method achieve this?

Update:

Now i can access scope data in angular service, but small issue comes here is on list click previous item's in scope doesn't get empty and new items get pushed into the scope.

So demand is on list click previous data become zero and new get pushed into the scope.

Answer 1

Pass the $rootScope to controller and set the listtype as required.

App.controller('MainCtrl', function($scope, $rootScope, Hututoo) {

  $scope.hututoo = new Hututoo();

  $scope.listtype= 'latest';
  $scope.changelist = function(str){
      $rootScope.listtype= str;
      $scope.hututoo = new Hututoo();
      $scope.hututoo.nextPage();
  }  
});

Plunker

Answer 2

Avoid using $rootScope -- it's bad practice, much like using the head object in pure JS. You're already able to share data between the factory and controller, so why not just make listtype a property of the factory:

var Hututoo = function () {
    ...
    this.listtype = 'latest';
};

and use it in your controller as you are other properties:

$scope.changelist = function(str){    
    $scope.hututoo.listtype = str;
    ...
};

Demo <-- ajax requests don't work for obvious reasons

Answer 3

$scope is not available to inject in services however you can pass it using parameters like so.

app.factory('Hututoo', function ($resource) {
    var somePrivateVar = [];
    return {
        set: function(scopeVar){
            somePrivateVar.push(scopeVar);
        },
        get: function(){
            return somePrivateVar;
        }
    }
});

then in controller

Hututoo.set($scope.anyVar);