Passing raw params to angular - angularjs

Question

I am building a small mobile app blog with ionic and angular but when i try to make a resource query with manually injected params i have a bad url string. meaning angular is not passing my syntax correctly or i am making a bad mistake.
Here is my code
angular.module('starter.posts', ['ionic','ngResource'])
.factory('Post', function ($resource) {
return $resource('http://example.org/wp-json/:params');
});
app.controller('HomeCtrl', function ($scope, $state, $ionicSideMenuDelegate, Post) {
"use strict";
/* Items for left side menu. */
$scope.posts = Post.query({params: "posts?filter[posts_per_page]=3"})
})
and the error log show the bellow error
http://example.org/wp-json/posts%3Ffilter%5Bposts_per_page%5D=3 Failed to load resource: the server responded with a status of 404 (Not Found)
which simply means that it did not translate the url correctly. How can i fix this so the url can be in the bellow format
http://example.org/wp-json/posts?filter[posts_per_page]=3
I am new to angular trying to simulate an entire wordpress blog with angular.

Answer 1

I usually do something like this, passing a js object in:
usersFactory.get = function (request) {
var operation= $http({url: urlBase, method:'get', params:request });
perhaps you should add posts to your resource url
$resource('http://example.org/wp-json/posts:params');
and pass an object like this
var filter={};
filer.posts_per_page=3
in as your params

Answer 2

I was able to figure the right syntax by using the code below,
Post.query({'filter[posts_per_page]': 20, 'page' : $scope.pageNum}, function (data, responseHeaders)