<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <h2>Projects</h2>
            Search: <input ng-model="query">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th><a hre="#" ng-click="order = 'name'">Name</a></th>
                        <th><a hre="#" ng-click="order = 'description'">Description</th>
                        <th><a hre="#" ng-click="order = 'active'">Active</th>
                        <th><a hre="#" ng-click="order = 'created'">Created</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="proj in projects | filter:query | orderBy:order">
                        <td>
                            <a href="#/projects/{{proj.id}}">
                                {{proj.name}}
                            </a>
                        </td>
                        <td>
                            {{proj.description}}
                        </td>
                        <td>
                            {{proj.active}}
                        </td>
                        <td>
                            {{proj.created | date: 'short'}}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <h2>Projects</h2>

            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label for="searchinput" class="col-sm-1 control-label">
                        Search:
                    </label>
                    <div class="col-sm-3">
                        <input ng-model="query" type="search"
                            class="form-control" id="searchinput"
                            placeholder="search">
                    </div>
                </div>
            </form>
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th><a hre="#" ng-click="order = 'name'">Name</a></th>
                        <th><a hre="#" ng-click="order = 'description'">Description</th>
                        <th><a hre="#" ng-click="order = 'active'">Active</th>
                        <th><a hre="#" ng-click="order = 'created'">Created</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="proj in projects | filter:query | orderBy:order">
                        <td>
                            <a href="#/projects/{{proj.id}}">
                                {{proj.name}}
                            </a>
                        </td>
                        <td>
                            {{proj.description}}
                        </td>
                        <td>
                            {{proj.active}}
                        </td>
                        <td>
                            {{proj.created | date: 'short'}}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Improve style of search input
Improve style of search input
