diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch04-01-simple-ng-model.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-01-simple-ng-model.html
new file mode 100644
index 0000000..5c8a4b1
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-01-simple-ng-model.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html ng-app="notesApp">
+<head>
+    <title>Notes App</title>
+    <script src="../../tp/angular.js"></script>
+    <style>
+        span {
+            background-color: #cce;
+        }
+    </style>
+</head>
+<body ng-controller="MainCtrl as ctrl">
+
+<input type="text" ng-model="ctrl.username"/>
+You typed {{ctrl.username}}
+
+
+<script type="text/javascript">
+    angular.module('notesApp', []).controller('MainCtrl', [
+        function () {
+            var self = this;
+            self.username = 'nothing';
+        }
+    ]);
+</script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch04-02-simple-ng-model2.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-02-simple-ng-model2.html
new file mode 100644
index 0000000..d02909f
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-02-simple-ng-model2.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html ng-app="notesApp">
+<head>
+    <title>Notes App</title>
+    <script src="../../tp/angular.js"></script>
+    <style>
+        span {
+            background-color: #cce;
+        }
+    </style>
+</head>
+<body ng-controller="MainCtrl as ctrl">
+
+<input type="text" ng-model="ctrl.username"/>
+<input type="password" ng-model="ctrl.password"/>
+<button ng-click="ctrl.change()">Change values</button>
+<button ng-click="ctrl.submit()">Submit</button>
+
+
+
+
+<script type="text/javascript">
+    angular.module('notesApp', []).controller('MainCtrl', [
+        function () {
+            var self = this;
+            self.change = function () {
+                self.username = 'changed';
+                self.password = 'password';
+            };
+
+            self.submit = function () {
+                console.log('user clicked submit with ',
+                    self.username, self.password);
+            };
+        }
+    ]);
+</script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch04-03-simple-form.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-03-simple-form.html
new file mode 100644
index 0000000..54a7ea4
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-03-simple-form.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html ng-app="notesApp">
+<head>
+    <title>Notes App</title>
+    <script src="../../tp/angular.js"></script>
+    <style>
+        span {
+            background-color: #cce;
+        }
+    </style>
+</head>
+<body ng-controller="MainCtrl as ctrl">
+
+<!--
+ - Note, using a form has the advantage of reacting to RETURN triggering
+ - the submit, as well as pressing the submit button.
+ -->
+<form ng-submit="ctrl.submit()">
+    <input type="text" placeholder="username" ng-model="ctrl.user.username"/>
+    <input type="password" placeholder="password" ng-model="ctrl.user.password"/>
+    <input type="submit" value="Submit"/>
+    <p></p>
+    <textarea cols="60" rows="5" ng-model="ctrl.user.notes" placeholder="Notes">
+    </textarea>
+    <p>
+        NOTES:
+        <div>
+        {{ctrl.user.notes}}
+        </div>
+    </p>
+</form>
+
+<script type="text/javascript">
+    angular.module('notesApp', [])
+        .controller('MainCtrl', [function () {
+            var self = this;
+
+            self.submit = function () {
+                console.log('User clicked submit with ', self.user);
+            };
+        }]);
+</script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch04-04-two-forms-databinding.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-04-two-forms-databinding.html
new file mode 100644
index 0000000..9cb4961
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-04-two-forms-databinding.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html ng-app="notesApp">
+<head>
+    <title>Notes App</title>
+    <script src="../../tp/angular.js"></script>
+    <style>
+        span {
+            background-color: #cce;
+        }
+    </style>
+</head>
+<body ng-controller="MainCtrl as ctrl">
+
+<form ng-submit="ctrl.submit1()">
+    <input type="text" placeholder="username" ng-model="ctrl.username"/>
+    <input type="password" placeholder="password" ng-model="ctrl.password"/>
+    <input type="submit" value="Submit"/>
+</form>
+
+<!-- Better way of structuring the form data -->
+<form ng-submit="ctrl.submit2()">
+    <input type="text" placeholder="username" ng-model="ctrl.user.username"/>
+    <input type="password" placeholder="password" ng-model="ctrl.user.password"/>
+    <input type="submit" value="Submit"/>
+</form>
+
+<script type="text/javascript">
+    angular.module('notesApp', [])
+        .controller('MainCtrl', [function () {
+            var self = this;
+
+            self.submit1 = function () {
+                // create user object to send to server
+                var user = {username: self.username, password: self.password};
+                console.log('First submit: ', user);
+            };
+            self.submit2 = function () {
+                console.log('Second submit: ', self.user);
+            };
+        }]);
+</script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch04-05-form-validation.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-05-form-validation.html
new file mode 100644
index 0000000..3501adb
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-05-form-validation.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html ng-app="notesApp">
+<head>
+    <title>Notes App</title>
+    <script src="../../tp/angular.js"></script>
+    <style>
+        span {
+            background-color: #cce;
+        }
+    </style>
+</head>
+<body ng-controller="MainCtrl as ctrl">
+
+<form ng-submit="ctrl.submit()" name="myForm">
+    <input type="text"
+           placeholder="username"
+           ng-model="ctrl.user.username"
+           required
+           ng-minlength="4"/>
+
+    <input type="password"
+           placeholder="password"
+           ng-model="ctrl.user.password"
+           required/>
+
+    <input type="submit"
+           value="Submit"
+           ng-disabled="myForm.$invalid"/>
+</form>
+
+<script type="text/javascript">
+    angular.module('notesApp', [])
+        .controller('MainCtrl', [function () {
+            var self = this;
+            self.submit = function () {
+                console.log('Submit: ', self.user);
+            };
+        }]);
+</script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch04-06-form-error-messages.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-06-form-error-messages.html
new file mode 100644
index 0000000..46c38c9
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-06-form-error-messages.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html ng-app="notesApp">
+<head>
+    <title>Notes App</title>
+    <script src="../../tp/angular.js"></script>
+</head>
+<body ng-controller="MainCtrl as ctrl">
+
+<form ng-submit="ctrl.submit()" name="myForm">
+    <input type="text"
+           name="uname"
+           placeholder="username"
+           ng-model="ctrl.user.username"
+           required
+           ng-minlength="4"/>
+    <span ng-show="myForm.uname.$error.required">
+        This is a required field
+    </span>
+    <span ng-show="myForm.uname.$error.minlength">
+        Minimum length required is 4
+    </span>
+    <span ng-show="myForm.uname.$invalid">
+        This field is invalid
+    </span>
+    <br/>
+
+    <input type="password"
+           name="pwd"
+           placeholder="password"
+           ng-model="ctrl.user.password"
+           required/>
+    <span ng-show="myForm.pwd.$error.required">
+        This is a required field
+    </span>
+    <br/>
+
+    <input type="submit"
+           value="Submit"
+           ng-disabled="myForm.$invalid"/>
+</form>
+
+<script type="text/javascript">
+    angular.module('notesApp', [])
+        .controller('MainCtrl', [function () {
+            var self = this;
+            self.submit = function () {
+                console.log('Submit: ', self.user);
+            };
+        }]);
+</script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch04-07-form-styling.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-07-form-styling.html
new file mode 100644
index 0000000..1b6ab86
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-07-form-styling.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html ng-app="notesApp">
+<head>
+    <title>Notes App</title>
+    <script src="../../tp/angular.js"></script>
+    <style>
+        .username.ng-valid {
+            background-color: greenyellow;
+        }
+        .username.ng-dirty.ng-invalid-required {
+            background-color: hotpink;
+        }
+        .username.ng-dirty.ng-invalid-minlength {
+            background-color: lightpink;
+        }
+    </style>
+</head>
+<body ng-controller="MainCtrl as ctrl">
+
+<form ng-submit="ctrl.submit()" name="myForm">
+    <input type="text"
+           class="username"
+           name="uname"
+           placeholder="username"
+           ng-model="ctrl.user.username"
+           required
+           ng-minlength="4"/>
+
+    <input type="submit"
+           value="Submit"
+           ng-disabled="myForm.$invalid"/>
+</form>
+
+<script type="text/javascript">
+    angular.module('notesApp', [])
+        .controller('MainCtrl', [function () {
+            var self = this;
+            self.submit = function () {
+                console.log('Submit: ', self.user);
+            };
+        }]);
+</script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch04-08-nested-forms.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-08-nested-forms.html
new file mode 100644
index 0000000..c314919
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-08-nested-forms.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html ng-app>
+<head>
+    <title>Notes App</title>
+    <script src="../../tp/angular.js"></script>
+</head>
+<!-- no controller in this example -->
+<body>
+
+<form novalidate name="myForm">
+    <input type="text"
+           class="username"
+           name="uname"
+           ng-model="ctrl.user.username"
+           required=""
+           placeholder="Username"
+           ng-minlength="4"/>
+
+    <input type="password"
+           class="password"
+           name="pad"
+           ng-model="ctrl.user.password"
+           required=""
+           placeholder="Password"
+           required=""/>
+
+    <p/>
+
+    <ng-form name="profile">
+        <input type="text"
+               name="firstName"
+               ng-model="ctrl.user.profile.firstName"
+               placeholder="First Name"
+               required/>
+        <input type="text"
+               name="middleName"
+               ng-model="ctrl.user.profile.middleName"
+               placeholder="Middle Name"/>
+        <input type="text"
+               name="lastName"
+               ng-model="ctrl.user.profile.lastName"
+               placeholder="Last Name"
+               required/>
+
+        <input type="date"
+               name="dob"
+               placeholder="Date of birth"
+               ng-model="ctrl.user.profile.dob"/>
+    </ng-form>
+
+    <span ng-show="myForm.profile.$invalid">
+        Please fill out the profile information
+    </span>
+
+    <p/>
+
+    <input type="submit"
+           value="Submit"
+           ng-disabled="myForm.$invalid"/>
+</form>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch04-09-checkbox-example.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-09-checkbox-example.html
new file mode 100644
index 0000000..fe35af1
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-09-checkbox-example.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html ng-app="notesApp">
+<head>
+    <title>Notes App</title>
+    <script src="../../tp/angular.js"></script>
+</head>
+<body ng-controller="MainCtrl as ctrl">
+
+    <div>
+        <h2>What are your favorite sports?</h2>
+        <div ng-repeat="sport in ctrl.sports">
+            <label ng-bind="sport.label"></label>
+            <div>
+                With binding:
+                <input type="checkbox"
+                       ng-model="sport.selected"
+                       ng-true-value="'YES'"
+                       ng-false-value="'NO'"/>
+            </div>
+            <div>
+                using ng-checked:
+                <input type="checkbox"
+                       ng-checked="sport.selected === 'YES'"/>
+            </div>
+            <div>
+                Current state: {{sport.selected}}
+            </div>
+            <br/>
+        </div>
+
+    </div>
+
+    <script type="text/javascript">
+        angular.module('notesApp', [])
+                .controller('MainCtrl', [function () {
+                    var self = this;
+                    self.sports = [
+                        {label: 'Basketball', selected: 'YES'},
+                        {label: 'Cricket', selected: 'NO'},
+                        {label: 'Soccer', selected: 'NO'},
+                        {label: 'Swimming', selected: 'YES'}
+                    ];
+                }]);
+    </script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch04-10-radio-buttons.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-10-radio-buttons.html
new file mode 100644
index 0000000..2a2cb83
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-10-radio-buttons.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html ng-app="notesApp">
+<head>
+    <title>Notes App</title>
+    <script src="../../tp/angular.js"></script>
+</head>
+<body ng-controller="MainCtrl as ctrl">
+
+    <div>
+        <h2>Radio Buttons</h2>
+        <div ng-init="user.gender = 'female'">
+            <input type="radio"
+                   name="gender"
+                   ng-model="user.gender"
+                   value="male"/>Male
+            <input type="radio"
+                   name="gender"
+                   ng-model="user.gender"
+                   value="female"/>Female
+        </div>
+    </div>
+
+    <div>
+        <h2>Radio Buttons two</h2>
+        <div ng-init="user.gender2 = 'male'; otherGender = 'Other'">
+            <input type="radio"
+                   name="gender2"
+                   ng-model="user.gender2"
+                   value="male"/>Male
+            <input type="radio"
+                   name="gender2"
+                   ng-model="user.gender2"
+                   value="female"/>Female
+            <input type="radio"
+                   name="gender2"
+                   ng-model="user.gender2"
+                   ng-value="otherGender"/>{{otherGender}}
+        </div>
+    </div>
+
+    <div>
+        <h2>Radio Buttons three</h2>
+        <div ng-repeat="ch in ctrl.choices">
+            <input type="radio"
+                   name="choice"
+                   ng-model="user.choice"
+                   ng-value="ch"/>{{ch}}
+
+        </div>
+    </div>
+
+
+    <script type="text/javascript">
+        angular.module('notesApp', [])
+                .controller('MainCtrl', [function () {
+                    var self = this;
+
+                    self.choices = ['foo', 'bar', 'baz', 'zoo', 'goo'];
+                }]);
+    </script>
+
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch04-11-select-example.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-11-select-example.html
new file mode 100644
index 0000000..a8cda33
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch04-11-select-example.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html ng-app="notesApp">
+<head>
+    <title>Notes App</title>
+    <script src="../../tp/angular.js"></script>
+</head>
+<body ng-controller="MainCtrl as ctrl">
+
+    <div>
+        <select ng-model="ctrl.selectedCountryId"
+                ng-options="c.id as c.label for c in ctrl.countries">
+        </select>
+        Selected Country ID: {{ctrl.selectedCountryId}}
+    </div>
+
+    <div>
+        <select ng-model="ctrl.selectedCountry"
+                ng-options="c.label for c in ctrl.countries track by c.id">
+        </select>
+        Selected Country: {{ctrl.selectedCountry}}
+    </div>
+
+    <script type="text/javascript">
+        angular.module('notesApp', [])
+                .controller('MainCtrl', [function () {
+                    var self = this;
+
+                    self.countries = [
+                        {label: 'UK', id: 1},
+                        {label: 'USA', id: 2},
+                        {label: 'France', id: 3},
+                        {label: 'Italy', id: 4}
+                    ];
+                    var first = self.countries[0];
+                    self.selectedCountryId = first.id;
+                    self.selectedCountry = first;
+                }]);
+    </script>
+
+</body>
+</html>