Factory method:

module.factory('RealmEvents', function($resource) {
  return $resource(authUrl + '/admin/realms/:id/events', {
    id : '@realm'
  });
});

Controller :

module.controller('RealmEventsCtrl', function($scope, RealmEvents,  realm) {
$scope.realm = realm;
$scope.page = 0;

$scope.fquery = {
        id : realm.realm,
        max : 100,
        first : 0
}
$scope.filterEvents = RealmEvents.query($scope.fquery);

$scope.query = {
    id : realm.realm,
    max : 5,   // bound to ng-model query.max in UI
    first : 0, // no ng-model in UI
    type : []  // bound to ng-model query.type[$index] in UI
               // a few other query.* ng-models in UI
}

$scope.update = function() {
    for (var i in $scope.query) {
        if ($scope.query[i] == '') {
            delete $scope.query[i];
       }
    }
    $scope.events = RealmEvents.query($scope.query);
}

$scope.firstPage = function() {
    $scope.query.first = 0;
    $scope.update();
}

$scope.previousPage = function() {
    $scope.query.first -= parseInt($scope.query.max);
    if ($scope.query.first < 0) {
        $scope.query.first = 0;
    }
    $scope.update();
}

$scope.nextPage = function() {
    $scope.query.first += parseInt($scope.query.max);
    $scope.update();
}

$scope.update();
});

HTML(UI):

<div class="form-group" data-ng-show="filter">
  <label class="col-sm-2 control-label" for="filterEvents" class="control-label">Event Type</label>
  <div class="col-sm-5">
       <select ui-select2 data-ng-model="query.type[$index]" data-placeholder="Select Event Type(s)" multiple>
            <option ng-repeat="event in filterEvents | unique: 'type'" value="{{event.type}}">{{event.type}}</option>
       </select>
  </div>
</div>

Issues :

$scope.filterEvents = RealmEvents.query($scope.fquery);

Request URL:

http://localhost:8081/auth/admin/realms/master/events?first=0&max=100

// This is OK and works perfectly and fetches required events

1.

$scope.events = RealmEvents.query($scope.query);

Request URL:http://localhost:8081/auth/admin/realms/master/events?max=5&type={}

// Why there isn't "first" as URL query parameter ?

// Required URL:

http://localhost:8081/auth/admin/realms/master/events?first=0&max=5&type=[]

2

On selecting LOGIN and REFRESH_TOKEN as Event Types in ui-Select2, $scope.events = RealmEvents.query($scope.query);

Request URL:http://localhost:8081/auth/admin/realms/master/events? max=5&type={"undefined":["REFRESH_TOKEN","LOGIN"]}  

// event type value(s) must be bound as an array and sent as query parameter, HOW ?

// Again, Why there isn't "first" as URL query parameter ?

// Required URL :

http://localhost:8081/auth/admin/realms/master/events?first=0&max=5&type=["REFRESH_TOKEN","LOGIN"] 

3.

Because, "first" value is not sent as query param or else is unreferenced, it causes errors on clicking first, previous and next buttons. On clicking the previous button:

Request URL:

http://localhost:8081/auth/admin/realms/master/events?first=NaN&max=5&type={"undefined":[]}

Required URL :

http://localhost:8081/auth/admin/realms/master/events?first=0&max=5&type=[]

In concise, i wish to send some values(int, string, array etc.) with URL as query parameters. Don't know how exactly arrays are sent with URL ?