diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch08-01-filter-example.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch08-01-filter-example.html
new file mode 100644
index 0000000..105209c
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch08-01-filter-example.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Filters in Action</title>
+    <script src="../../tp/angular.js"></script>
+</head>
+<body ng-app="filtersApp">
+
+    <div ng-controller="FilterCtrl as ctrl">
+        <div>
+            Amount as a number: {{ctrl.amount | number}}
+        </div>
+        <div>
+            Total cost as a currency: {{ctrl.totalCost | currency}}
+        </div>
+        <div>
+            Total cost in GBP: {{ctrl.totalCost | currency:'GBP '}}
+        </div>
+        <div>
+            Shout: {{ctrl.name | uppercase}}
+        </div>
+        <div>
+            Whisper: {{ctrl.name | lowercase}}
+        </div>
+        <div>
+            Start time: {{ctrl.startTime | date:'medium'}}
+        </div>
+        <div>
+            as JSON: {{ctrl.struct | json}}
+        </div>
+    </div>
+
+    <script type="text/javascript">
+        angular.module('filtersApp', [])
+                .controller('FilterCtrl', [function () {
+                    var self = this;
+                    self.amount = 1024;
+                    self.totalCost = 4906;
+                    self.name = 'Onos Rocks!';
+                    self.startTime = new Date().getTime();
+                    self.struct = {
+                        foo: 'bar',
+                        baz: 3.1415
+                    };
+                }]);
+    </script>
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch08-02-filter-number-string.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch08-02-filter-number-string.html
new file mode 100644
index 0000000..46e9c4d
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch08-02-filter-number-string.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Filters in Action</title>
+    <script src="../../tp/angular.js"></script>
+</head>
+<body ng-app="filtersApp">
+
+    <ul ng-controller="FilterCtrl as ctrl">
+        <li>
+            Amount - {{ctrl.amount}}
+        </li>
+        <li>
+            Amount - Default Currency: {{ctrl.amount | currency}}
+        </li>
+        <li>
+            <!-- Using English pound sign -->
+            Amount - GBP Currency: {{ctrl.amount | currency:'&#163'}}
+        </li>
+        <li>
+            Amount - Number: {{ctrl.amount | number }}
+        </li>
+        <li>
+            Amount - Number (4 decimals): {{ctrl.amount | number:4}}
+        </li>
+        <li>
+            Amount - Yummy &#x3c0 = {{ctrl.pi | number:4 }}
+        </li>
+
+        <li>
+            Name - no filters: {{ctrl.name}}
+        </li>
+        <li>
+            Name - lowercase: {{ctrl.name | lowercase}}
+        </li>
+        <li>
+            Name - uppercase: {{ctrl.name | uppercase}}
+        </li>
+        <li>
+            Name - prefix: {{ctrl.name | limitTo:4}}
+        </li>
+
+        <li>
+            JSON filter: {{ctrl.struct | json}}
+        </li>
+
+        <li>
+            Timestamp: {{ctrl.startTime}}
+        </li>
+        <li>
+            Default Date filter: {{ctrl.startTime | date}}
+        </li>
+        <li>
+            Medium Date filter: {{ctrl.startTime | date:'medium'}}
+        </li>
+        <li>
+            Long Date filter: {{ctrl.startTime | date:'longDate'}}
+        </li>
+        <li>
+            Custom Date filter: {{ctrl.startTime | date:'M/dd, yyyy'}}
+        </li>
+        <li>
+            Custom Time filter: {{ctrl.startTime | date:'h:m a'}}
+        </li>
+    </ul>
+
+    <script type="text/javascript">
+        angular.module('filtersApp', [])
+                .controller('FilterCtrl', [function () {
+                    var self = this;
+                    self.amount = 1024;
+                    self.totalCost = 4906;
+                    self.name = 'Onos Rocks!';
+                    self.startTime = new Date().getTime();
+                    self.struct = {
+                        foo: 'bar',
+                        baz: 3.1415
+                    };
+                    self.pi = Math.PI;
+                }]);
+    </script>
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch08-03-filter-arrays.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch08-03-filter-arrays.html
new file mode 100644
index 0000000..a9ce3ca
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch08-03-filter-arrays.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Filters in Action</title>
+    <script src="../../tp/angular.js"></script>
+</head>
+<body ng-app="filtersApp">
+
+    <div ng-controller="FilterCtrl as ctrl">
+
+        <table>
+            <tr>
+                <td>
+                    <button ng-click="ctrl.currentFilter = 'string'">
+                        Filter with string
+                    </button>
+                </td>
+                <td>
+                    Filter Text
+                    <input type="text"
+                           ng-model="ctrl.filterOptions['string']"/>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <button ng-click="ctrl.currentFilter = 'object'">
+                        Filter with object
+                    </button>
+                </td>
+                <td>
+                    Show Done or Not Done
+                    <input type="checkbox"
+                           ng-model="ctrl.filterOptions['object'].done"/>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <button ng-click="ctrl.currentFilter = 'function'">
+                        Filter with function
+                    </button>
+                </td>
+            </tr>
+        </table>
+        <ul>
+            <li ng-repeat="note in ctrl.notes |
+                            filter:ctrl.filterOptions[ctrl.currentFilter] |
+                            orderBy:ctrl.sortOrder |
+                            limitTo:5">
+                {{note.label}} - {{note.type}} - {{note.done}}
+            </li>
+        </ul>
+    </div>
+
+
+    <script type="text/javascript">
+        angular.module('filtersApp', [])
+                .controller('FilterCtrl', [function () {
+                    var self = this;
+
+                    self.notes = [
+                        {label: 'FC Todo', type: 'chore', done: false},
+                        {label: 'FT Todo', type: 'task', done: false},
+                        {label: 'FF Todo', type: 'fun', done: true},
+                        {label: 'SC Todo', type: 'chore', done: false},
+                        {label: 'ST Todo', type: 'task', done: true},
+                        {label: 'SF Todo', type: 'fun', done: true},
+                        {label: 'TC Todo', type: 'chore', done: false},
+                        {label: 'TT Todo', type: 'task', done: false},
+                        {label: 'TF Todo', type: 'fun', done: false}
+                    ];
+
+                    self.sortOrder = ['+type', '-label'];
+
+                    self.filterOptions = {
+                        'string': '',
+                        'object': {done: false, label: 'F'},
+                        'function': function (note) {
+                            return note.type === 'task' && note.done === false;
+                        }
+                    };
+
+                    self.currentFilter = 'string';
+                }]);
+    </script>
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch08-04-custom-filters.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch08-04-custom-filters.html
new file mode 100644
index 0000000..f39991d
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch08-04-custom-filters.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Custom Filters in Action</title>
+    <script src="../../tp/angular.js"></script>
+</head>
+<body ng-app="filtersApp">
+
+    <div ng-controller="FilterCtrl as ctrl">
+        <div>
+            Start time (Timestamp): {{ctrl.startTime}}
+        </div>
+        <div>
+            Start time (Time): {{ctrl.startTime | date:'h:m a'}}
+        </div>
+        <div>
+            Start time (Our filter): {{ctrl.startTime | timeAgo}}
+        </div>
+        <div>
+            Start time (Our filter 2): {{ctrl.startTime | timeAgo:true}}
+        </div>
+        <div>
+            Some time ago (Computed): {{ctrl.someTimeAgo | date:'h:m a'}}
+        </div>
+        <div>
+            Some time ago (Our filter): {{ctrl.someTimeAgo | timeAgo}}
+        </div>
+    </div>
+
+    <script type="text/javascript">
+        angular.module('filtersApp', [])
+                .controller('FilterCtrl', [function () {
+                    var self = this;
+                    self.startTime = new Date().getTime();
+                    self.someTimeAgo = self.startTime - (1000*3600*4);
+                }])
+                .filter('timeAgo', [function () {
+                    var _m = 1000 * 60,
+                        _h = _m * 60,
+                        _d = _h * 24,
+                        _mon = _d * 30;
+
+                    return function (ts, ignoreSecs) {
+                        var now = new Date().getTime(),
+                                diff = now - ts;
+                        if (diff < _m && !ignoreSecs) {
+                            return 'seconds ago';
+                        } else if (diff < _h) {
+                            return 'minutes ago';
+                        } else if (diff < _d) {
+                            return 'hours ago';
+                        } else if (diff < _mon) {
+                            return 'days ago';
+                        } else {
+                            return 'months ago';
+                        }
+                    }
+                }]);
+    </script>
+</body>
+</html>