Angular load json file dynamically onclick - json

Question

I have a simple page that displays a list of items. Data is pulled from a JSON file (URL is provided by the server).
Two tabs allow to display (onclick) the "most recent" or the "popular" items (again data of each tab will is provided via JSON file). By default the "most recent" items should be displayed.
What is the best way to load the right JSON file onclick and display its content.
I was thinking of passing the URLs in the markup (but I doubt that's the best way to do it). What I had in mind:
HMTL
<ul>
<li jsrc="recentitems.json" urlgetter>Most recent</li>
<li jsrc="popularitems" urlgetter>Most popular</li>
</ul>
Plunker of my code:
http://plnkr.co/edit/glSz1qytmdZ9BQfGbmVo?p=preview
Any suggestions on how to approach it?
EDIT
I'm slightly changing my approach. I'm now making one HTTP request (hopefully also better performance wise?).
Basically I'd like to load all the items once then filter/sort them.
Expanding from your plunker: http://plnkr.co/edit/glSz1qytmdZ9BQfGbmVo?p=preview
I added a "date" & "views" attributes to the object item (see JSON).
Tabs
-- How could I filter/sort the items onclick? "Recent" would be sorted by date and "Popular" would be sorted by views.
Categories
-- I'm using ng-click to grab the category value although not sure how to update the filter dynamically (using the value passed onclick).
Thanks

Answer 1

One way is to do something like:-
First the HTML:-
<div ng-app="App">
<div ng-controller="tabsCtrl">
<ul>
<li ng-click="tab(1)">Recent items</li>
<li ng-click="tab(2)">Popular items</li>
</ul>
<ul>
<li ng-repeat='product in products'>{{product.Name}}</li>
</ul>
{{products || json}}
</div>
</div>
and the JS
var app = angular.module('App', []);
app.factory('products', function ($http, $q) {
return {
items: function (url) {
//create our deferred object.
var deferred = $q.defer();
//make the call.
$http.get(url).success(function (data) {
//when data is returned resolve the deferment.
deferred.resolve(data);
}).error(function () {
//or reject it if there's a problem.
deferred.reject();
});
//return the promise that work will be done.
return deferred.promise;
}
}
});
app.controller("tabsCtrl", function ($scope, products) {
$scope.products = products.items('/api/products');
$scope.tab = function (tabIndex) {
if (tabIndex == 1)
$scope.products = products.items('/api/products');
if (tabIndex == 2)
$scope.products = products.items('/api/popularproducts');
};
});