JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div x-ng-controller='LeaderboardCtrl'>
    <select id='leaderboard-select'>
        <option value='day'>day</option>
        <option value='week'>week</option>
        <option value='month'>month</option>
    </select>
    <div x-ng-repeat='p in leaderboard'>
        <p>{{p}}</p>
    </div>
</div>

JavaScript

var lead = angular.module("lead",[]);

function LeaderboardCtrl($scope,$attrs,$http,jtlanService){
	$scope.leaderboard = [];
	$scope.period = 'day';
	
	var data = {
		period:$scope.period
	};
	
	$scope.loadLeaderboard = function(){
		myService.loadLeaderboard(data).then(function(leaderboard){
			$scope.leaderboard = [];
			$scope.leaderboard.push.apply($scope.leaderboard,leaderboard);
		});
	}
	
	$scope.reloadLeaderboard = function(){
		myService.loadLeaderboard(data).then(function(leaderboard){
			$scope.$apply(function(){
				$scope.leaderboard = [];
				$scope.leaderboard.push.apply($scope.leaderboard,leaderboard);
			});
		});
	}
	
	$scope.loadLeaderboard()
}

lead.service("myService",["$http", function($http){
	var myService = {
			loadLeaderboard : function(data){
				var promise = $http.jsonp("/widget/leaderboardJSONP?callback=JSON_CALLBACK&_="+new Date(),{
					params:data,
					cache:false,
					ajaxOptions: {cache: false}
				}).then(function(response){
					return response.data;
				});
				return promise;
			}
	};
	return myService;
}]);

$("#leaderboard-select").change(function(){
		scope.period = $("#leaderboard-select").val();
		scope.reloadLeaderboard();
});