(function () {
    'use strict';
    var app = angular.module('app', []);
})();
<!DOCTYPE html>
<html data-ng-app="app">
<head>
    <title>jquery and angular</title>
    <link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="styles.css"/>
</head>
<body class="container" 
  data-ng-controller="people as vm">
    <h2>Angular Rows and Filter</h2>
    <h3>(Angular and jQuery)</h3>
    <div><a href="http://plnkr.co/edit/glCFXNVUhA7JoZCIu85A?p=preview">See the jQuery version here</a></div>
    <div class="well">
      <div>
          <label>Filter</label>
          <input data-ng-model="personFilter"/>
      </div>
      <table class="table table-bordered table-striped table-condensed">
          <thead>
              <th>First</th>
              <th>Last</th>
          </thead>
          <tbody>
              <tr data-ng-repeat="p in vm.people | filter:personFilter">
                  <td>{{p.first}}</td>
                  <td>{{p.last}}</td>
              </tr>
          </tbody>
      </table>
  </div>
    <script data-require="angular.js@1.2.x" 
      src="http://code.angularjs.org/1.2.13/angular.js" 
      data-semver="1.2.13"></script>

    <script src="app.js"></script>
    <script src="people.js"></script>
</body>
</html>
/* Put your css in here */


(function () {
    'use strict';

    angular.module('app')
        .controller('people', people);

    function people() {
        var vm = this;
        vm.people = [];

        activate();

        function activate() {
            vm.people = [
                {first: 'John', last: 'Papa'},
                {first: 'Bob', last: 'Fields'},
                {first: 'Brian', last: 'Clark'},
                {first: 'Greg', last: 'Stewart'}
            ];
        }
    }
})();