AngularJS 1.5.* + Bootstrap Example

<div class="container" ng-app="clientsApp" ng-controller="ClientsCtrl">

  <div class="page-header">

    <h1>Clients</h1>

  </div>

  <hr />

​

  <div class='row'>

    <div class='col-sm-8'>

      <form class='form-group form-inline'>

        <input class='form-control' ng-model='search' id='search-input' placeholder='Search...' autocomplete='off' type='text'>

      </form>

​

      <div class="table-wrap">

        <table class='table table-striped table-bordered table-hover' id='clientTable'>

          <colgroup>

            <col style="width: 1px" />

            <col style="width: ;" />

            <col style="width: 100px" />

            <col style="width: 100px" />

            <col style="width: 200px" />

          </colgroup>

          <thead class="thead-inverse">

            <tr>

              <th class="text-xs-center">Id</th>

              <th>Name</th>

              <th class="text-xs-center">Age</th>

              <th class="text-xs-center">Percentage</th>

              <th class="text-xs-center"></th>

            </tr>

          </thead>

          <tbody ng-repeat='client in clients | filter:search'>

            <tr ng-if='client == activeClient'>

              <td class="text-xs-center">{{ client.id }}</td>

              <td>{{ client.name }}</td>

              <td class="text-xs-center">{{ client.age }}</td>

              <td class="text-xs-center">{{ client.percentage | percentage }}</td>

              <td class="text-xs-center">

                <a class='btn btn-primary' href='' ng-click='update(client)'>Update</a>

              </td>

            </tr>

            <tr ng-if='client != activeClient'>

              <td class="text-xs-center">{{ client.id }}</td>

              <td>{{ client.name }}</td>

              <td class="text-xs-center">{{ client.age }}</td>

              <td class="text-xs-center">{{ percentageOf(client.percentage) }}</td>

              <td class="text-xs-center">

                <a class='btn btn-primary' href='' ng-click='edit(client)'>Edit</a>

                <a class='btn btn-danger' href='' ng-click='delete(client)'>Delete</a>

              </td>

            </tr>

          </tbody>

        </table>

      </div>

    </div>

    <div class='col-sm-4'>

      <h5>Adding Client</h5>

      <form name='clientForm' novalidate role='form'>

        <div class='form-group'>

          <label for='name'>Name:</label>

          <input class='form-control' ng-model='newClient.name' id='name' name='name' type='text' required>

          <span class='help-block' ng-show='clientForm.name.$error.required'>Name is required</span>

        </div>

        <div class='form-group'>

          <label for='age'>Age</label>

          <input class='form-control' ng-model='newClient.age' id='age' name='age' type='number' required max='100' min='1'>

          <span class='help-block' ng-show='clientForm.age.$error.required'>Age is required</span>

          <span class='help-block' ng-show='clientForm.age.$error.min'>Age should be greater than 1</span>

          <span class='help-block' ng-show='clientForm.age.$error.max'>Age should be lesser than 100</span>

          <span class='help-block' ng-show='clientForm.age.$error.integer'>Age should be an integer</span>

        </div>

        <div class='form-group'>

          <label for='percentage'>Percentage</label>

          <input class='form-control' ng-model='newClient.percentage' id='percentage' name='percentage' type='number' required max='1' min='0'>

          <span class='help-block' ng-show='clientForm.percentage.$error.required'>Percentage is required</span>

          <span class='help-block' ng-show='clientForm.percentage.$error.min'>Percentage should be greater than 0</span>

          <span class='help-block' ng-show='clientForm.percentage.$error.max'>Percentage should be lesser than 1</span>

        </div>

        <button class='btn btn-primary' ng-click='create()' ng-disabled='clientForm.$invalid'> Save </button>

      </form>

    </div>

  </div>

​

​

</div>