<!DOCTYPE html>
<html data-ng-app="app">
  <head>
    <title>AngularJS Demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>

    <script>
      angular.module('app', []).controller('MainController', ['$scope', function($scope) {
          $scope.place = 'Meetup';

          $scope.people = [
            { name: 'Bob', age: 35 },
            { name: 'Rich', age: 27 },
            { name: 'Sarah', age: 24 },
            { name: 'Lisa', age: 45 },
          ];
      }]);
    </script>
  </head>

  <body data-ng-controller="MainController">
    <h1>Hello {{place}}</h1>
    <p>Hello everyone at {{place}}, this is a basic introduction to AngularJS.</p>

    <p>
      <label>Filter:</label>
      <input type="text" name="filter" data-ng-model="filter" placeholder="Filter the list below...">
    </p>

    <ul>
      <li data-ng-repeat="person in people | filter:filter">
        [{{$index + 1}}] {{person.name}} who is <i>{{person.age}}</i>
      </li>
    </ul>
  </body>
</html>

<!DOCTYPE html>
<html data-ng-app="app">
  <head>
    <title>AngularJS Demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-resource.min.js"></script>

    <script>
      var App = angular.module('app', ['ngResource']);

      App.factory('People', ['$resource', function($resource) {
          return $resource('http://localhost:4567/people/:id', { id: '@id' });
      }]);

      App.controller('MainController', ['$scope', 'People', function($scope, People) {
          $scope.place = 'Meetup';
          $scope.people = People.query();
      }]);
    </script>
  </head>

  <body data-ng-controller="MainController">
    <h1>Hello {{place}}</h1>
    <p>Hello everyone at {{place}}, this is a basic introduction to AngularJS.</p>

    <p>
      <label>Filter:</label>
      <input type="text" name="filter" data-ng-model="filter" placeholder="Filter the list below...">
    </p>

    <ul>
      <li data-ng-repeat="person in people | filter:filter">
        [{{$index + 1}}] {{person.name}} who is <i>{{person.age}}</i>
      </li>
    </ul>
  </body>
</html>

Switch to fetching via ngResource.
Switch to fetching via ngResource.
