JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html ng-app="Twitter">
<head>
<meta charset="utf-8">
<title>Tweet Search</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script src="http://code.angularjs.org/angular-resource-1.0.0rc4.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="TwitterCtrl">
<div class="hero-unit">
<h1><u>Tweet search</u></h1>
<br>
<div class="input-prepend">
<button class="btn btn-primary" ng-click="doSearch()" type="button"><i class=""></i> Search </button>
<button class="btn" disabled type="button">Now the latest</button>
<input type="number" ng-model="resultsPerPage" placeholder=5 style="border-radius: 0; width: 35px"/>
<button class="btn" disabled type="button">Tweets for</button>
<input type="text" ng-model="searchTerm" placeholder="grio_sf"/>
</div>
</div>
<div id="resultsContainer" ng-show="tweets.length > 0">
<table class="table table-striped">
<thead>
<tr>
<th>Tweeter</th>
<th>Tweet</th>
<th>Tweet-time</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="tweet in tweets">
<td><img src="{{tweet.profile_image_url}}" alt=""> {{tweet.from_user}}</td>
<td>{{tweet.text}}</td>
<td>{{tweet.created_at}}</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" ng-click="loadMore()" style="width: 100%"><i class="icon-arrow-down"></i> Load More </button>
</div>
</div>
<script type="text/javascript">
angular.module('Twitter', ['ngResource']);
function TwitterCtrl($scope, $resource) {
//stores the whole list...