petehamilton/app.js

## app.js
var app = angular.module('testapp', ['ngRoute']);

app.config(function ($locationProvider) {
  // $locationProvider.html5Mode(true);
})

app.controller('MainCtrl', function ($scope, $location, $route) {

  // Example URLs which should work on refresh
  //
  // index.html?search_text=something
  // index.html?search_text=something&use_option_x=true
  // index.html?use_option_x=true
  // index.html?page=2&search_text=something
  // index.html?page=2&per_page=5&search_text=something
  //
  // etc...

  // Filtering/Query
  $scope.filters = {}
  $scope.filters.search_text = null
  $scope.filters.use_option_x = null

  // Pagination
  $scope.pagination = {
    page: 1,
    per_page: 5
  }

  $scope.changePage = function (page) {
    $location.search('page', page);
    $scope.pagination.page = page; // DONT WANT TO HAVE TO DO THIS
  }

});

## index.html
<!DOCTYPE html>
<html ng-app="testapp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="http://code.angularjs.org/1.2.10/angular.js"></script>
    <script src="http://code.angularjs.org/1.2.10/angular-route.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Pagination: {{pagination}}</p>
    <p>Filters: {{filters}}</p>

    <label>
    Search:
    <input type="text" value="" ng-model="filters.search_text" placeholder="Search Text">
    </label>

    <label>
    Other Thing:
    <input type="checkbox" ng-model="filters.use_option_x">
    </label>

    <p>
      <span class="link" ng-class="{'page-on': pagination.page == 1}" ng-click="changePage(1)">Page 1</span>
      <span class="link" ng-class="{'page-on': pagination.page == 2}" ng-click="changePage(2)">Page 2</span>
      <span class="link" ng-class="{'page-on': pagination.page == 3}" ng-click="changePage(3)">Page 3</span>
    </p>
  </body>

</html>

## style.css
/* Put your css in here */


.page-on {
  font-style: bold;
}

.link {
  text-decoration: underline;
  cursor: pointer;
}
	var app = angular.module('testapp', ['ngRoute']);

	app.config(function ($locationProvider) {
	// $locationProvider.html5Mode(true);
	})

	app.controller('MainCtrl', function ($scope, $location, $route) {

	// Example URLs which should work on refresh
	//
	// index.html?search_text=something
	// index.html?search_text=something&use_option_x=true
	// index.html?use_option_x=true
	// index.html?page=2&search_text=something
	// index.html?page=2&per_page=5&search_text=something
	//
	// etc...

	// Filtering/Query
	$scope.filters = {}
	$scope.filters.search_text = null
	$scope.filters.use_option_x = null

	// Pagination
	$scope.pagination = {
	page: 1,
	per_page: 5
	}

	$scope.changePage = function (page) {
	$location.search('page', page);
	$scope.pagination.page = page; // DONT WANT TO HAVE TO DO THIS
	}

	});
	<!DOCTYPE html>
	<html ng-app="testapp">

	<head>
	<meta charset="utf-8" />
	<title>AngularJS Plunker</title>
	<script>document.write('<base href="' + document.location + '" />');</script>
	<link rel="stylesheet" href="style.css" />
	<script src="http://code.angularjs.org/1.2.10/angular.js"></script>
	<script src="http://code.angularjs.org/1.2.10/angular-route.js"></script>
	<script src="app.js"></script>
	</head>

	<body ng-controller="MainCtrl">
	<p>Pagination: {{pagination}}</p>
	<p>Filters: {{filters}}</p>

	<label>
	Search:
	<input type="text" value="" ng-model="filters.search_text" placeholder="Search Text">
	</label>

	<label>
	Other Thing:
	<input type="checkbox" ng-model="filters.use_option_x">
	</label>

	<p>
	<span class="link" ng-class="{'page-on': pagination.page == 1}" ng-click="changePage(1)">Page 1</span>
	<span class="link" ng-class="{'page-on': pagination.page == 2}" ng-click="changePage(2)">Page 2</span>
	<span class="link" ng-class="{'page-on': pagination.page == 3}" ng-click="changePage(3)">Page 3</span>
	</p>
	</body>

	</html>
	/* Put your css in here */


	.page-on {
	font-style: bold;
	}

	.link {
	text-decoration: underline;
	cursor: pointer;
	}