Угловая загрузка json-файла динамически onclick

Question

У меня есть простая страница, отображающая список элементов. Данные извлекаются из файла JSON (URL-адрес предоставляется сервером).

Две вкладки позволяют отображать (onclick) «самые последние» или «популярные» элементы (снова данные каждой вкладки предоставляются через файл JSON). По умолчанию должны отображаться «самые последние» элементы.

Каков наилучший способ загрузки правого файла JSON onclick и отображения его содержимого.

Я думал о передаче URL-адресов в разметке (но я сомневаюсь, что это лучший способ сделать это). То, что я имел в виду:

HMTL

<ul> 
    <li jsrc="recentitems.json" urlgetter>Most recent</li> 
    <li jsrc="popularitems" urlgetter>Most popular</li> 
</ul> 

Plunker моего кода: http://plnkr.co/edit/glSz1qytmdZ9BQfGbmVo?p=preview

Любые предложения о том, как подойти к нему?

EDIT

Я немного изменив свой подход. Теперь я делаю один HTTP-запрос (надеюсь, и лучшая производительность?). В принципе, я хотел бы загрузить все элементы, потом фильтровать/сортировать их.

Расширение от вашего plunker: http://plnkr.co/edit/glSz1qytmdZ9BQfGbmVo?p=preview Я добавил «Дата» & «взгляды» атрибуты элемента объекта (см JSON).

1. Вкладки - Как я мог фильтровать/сортировать элементы OnClick? «Недавние» будут отсортированы по дате, а «Популярный» будет отсортирован по точкам.
2. Категории - Я использую ng-click для захвата значения категории, хотя не уверен, как динамически обновлять фильтр (используя значение, переданное onclick).

Благодаря

Answer 1

Один из способов сделать что-то вроде: -

Первый в 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> 

и 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'); 
    }; 
});