1_withScope.js

// This uses $scope to expose stuff to the view.  This was just what I learned
// reading Angular's docs.  So it's somewhat "official", but
// the downside is that I have to explain wtf $scope is.
app.config([
          "$routeProvider",
  function($routeProvider) {
    $routeProvider.when("/", {
       controller: "CustomerSearchController",
      templateUrl: "customer_search.html"
    });
  }
]);

app.controller("CustomerSearchController", [ 
          '$scope','$http','$location',
  function($scope , $http , $location) {                         

    var page = 0;

    $scope.customers = [];
    $scope.search = function(searchTerm) {   
      $http.get("/customers.json",  
                { "params": { "keywords": searchTerm, "page": page } }
      ).success(
        function(data,status,headers,config) { 
          $scope.customers = data;
      }).error(
        function(data,status,headers,config) {
          alert("There was a problem: " + status);
        });
    }

    $scope.previousPage = function() {
      if (page > 0) {
        page = page - 1;
        $scope.search($scope.keywords);
      }
    }
    $scope.nextPage = function() {
      page = page + 1;
      $scope.search($scope.keywords);
    }

    $scope.viewDetails = function(customer) {
      $location.path("/" + customer.id);
    }
  }
]);

2_controllerAs.js

// Here we use angular's "controller as" syntax.
// The downside is that the official documentation doesn't
// really encourage this, and we have to have a weird discussion
// around storing "this" in a var.  Positives are
// that it's NOT as weird as the discussion around $scope,
// it helps later on when we nest controllers, and 
// generally seems to accepted/recommended practice.
app.config([
          "$routeProvider",
  function($routeProvider) {
    $routeProvider.when("/", {
       controller: "CustomerSearchController",
     controllerAs: "search",
      templateUrl: "customer_search.html"
    });
  }
]);

app.controller("CustomerSearchController", [ 
          '$http','$location',
  function($http , $location) {                         

    var search = this;
    var page = 0;

    search.customers = [];
    search.search = function(searchTerm) {   
      $http.get("/customers.json",  
                { "params": { "keywords": searchTerm, "page": page } }
      ).success(
        function(data,status,headers,config) { 
          search.customers = data;
      }).error(
        function(data,status,headers,config) {
          alert("There was a problem: " + status);
        });
    }

    search.previousPage = function() {
      if (page > 0) {
        page = page - 1;
        search.search($scope.keywords);
      }
    }
    search.nextPage = function() {
      page = page + 1;
      search.search($scope.keywords);
    }

    search.viewDetails = function(customer) {
      $location.path("/" + customer.id);
    }
  }
]);