JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app ng-controller="RedditPosts">
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->Search:
<input ng-model="query">Sort by:
<select ng-model="orderProp">
<option value='data.score'>Most Down Votes</option>
<option value='-data.score'>Most Up Votes</option>
</select>Subreddit:
<select ng-model="subreddit" ng-change="updatePosts()">
<option value='pics'>pics</option>
<option value='earthporn'>earth</option>
<option value='spaceporn'>earth</option>
</select>
</div>
<div class="span10">
<!--Body content-->
<ul class="Post">
<li ng-repeat="entry in Post.children | filter:query | orderBy:orderProp "> <a href="{{entry.data.title}}" class="thumb"><img ng-src="{{entry.data.url}}" height="250" width="250"></a>
{{entry.data.ups}} {{entry.data.downs}}</li>
</ul>
</div>
</div>
</div>
</div>
JavaScript
function RedditPosts($scope, $http) {
$scope.orderProp = '-data.score';
$scope.subreddit = 'pics';
$scope.updatePosts = function () {
$http.jsonp('http://reddit.com/r/'+$scope.subreddit+'.json?jsonp=JSON_CALLBACK').success(function (response) {
$scope.Post = response.data
});
};
$scope.updatePosts();
}