JSFiddle - React, Tailwind, and code Playground

HTML

<div x-ng-app="lead" ng-controller='LeaderboardCtrl'>
    <select id='leaderboard-select' ng-model="period" ng-change="ch()">
        <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", []);

lead.service("myService", ["$http", function ($http) {
    var myService = {
        loadLeaderboard: function (period, cb) {
            cb([{
                test: 1 + period
            }, {
                test: 2 + period
            }]);
        }
    };
    return myService;
}]);

function LeaderboardCtrl($scope, $attrs, $http, myService) {
    $scope.leaderboard = [];
    $scope.periods = ['day', 'week', 'month'];
    $scope.period = 'day';

    $scope.ch = function () {
        $scope.loadLeaderboard();

    };

    var data = {
        period: $scope.period
    };

    $scope.loadLeaderboard = function () {
        myService.loadLeaderboard($scope.period, function (leaderboard) {
            $scope.leaderboard = [];
            $scope.leaderboard.push.apply($scope.leaderboard, leaderboard);
        });
    }

    $scope.loadLeaderboard()
}