diff --git a/web/skins/bootstrap/js/controllers.js b/web/skins/bootstrap/js/controllers.js
index c12715bda..514db3a0a 100644
--- a/web/skins/bootstrap/js/controllers.js
+++ b/web/skins/bootstrap/js/controllers.js
@@ -46,11 +46,50 @@ ZoneMinder.controller('EventController', function($scope, $location, Event) {
 	});
 });
 
-ZoneMinder.controller('MonitorController', function($scope) {
-	$scope.sourceType = 'Local';
-	$scope.RefBlendPerc = 6;
-	$scope.AlarmRefBlendPerc = 6;
-	$scope.Function = 'Monitor';
+ZoneMinder.controller('MonitorController', function($scope, $http) {
+	$scope.monitor = {};
+	$scope.monitor.sourceType = 'Remote';
+	$scope.monitor.RefBlendPerc = 6;
+	$scope.monitor.AlarmRefBlendPerc = 6;
+	$scope.monitor.Function = 'Monitor';
+	$scope.monitor.ImageBufferCount = 100;
+	$scope.monitor.WarmupCount = 25;
+	$scope.monitor.PreEventCount = 50;
+	$scope.monitor.PostEventCount = 50;
+	$scope.monitor.StreamReplayBuffer = 1000;
+	$scope.monitor.AlarmFrameCount = 1;
+	$scope.monitor.LabelFormat = '%N - %d/%m/%y %H:%M:%S';
+	$scope.monitor.LabelX = 0;
+	$scope.monitor.LabelY = 0;
+	$scope.monitor.Colours = 3;
+	$scope.monitor.Orientation = 0;
+	$scope.monitor.Enabled = true;
+	$scope.monitor.Protocol = 'http';
+	$scope.monitor.SectionLength = 600;
+	$scope.monitor.EventPrefix = 'Event-';
+	$scope.monitor.FrameSkip = 0;
+	$scope.monitor.MotionFrameSkip = 0;
+	$scope.monitor.FPSReportInterval = 1000;
+	$scope.monitor.DefaultView = 'Events';
+	$scope.monitor.DefaultRate = 100;
+	$scope.monitor.DefaultScale = 100;
+	$scope.monitor.SignalCheckColour = '#0000c0';
+	var color =  '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
+	$scope.monitor.WebColour = color;
+
+
+	$scope.submitMonitor = function() {
+	$http({
+        method  : 'POST',
+        url     : '/api/monitors.json',
+        data    : $.param($scope.monitor),
+        headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
+    })
+        .success(function(data) {
+            console.log(data);
+		window.location = "/index.php?view=console";
+        });
+	};
 });
 
 ZoneMinder.controller('ConsoleController', function($scope, Console) {
diff --git a/web/skins/bootstrap/views/monitor.php b/web/skins/bootstrap/views/monitor.php
index b9f5f5bb1..c6f61f644 100644
--- a/web/skins/bootstrap/views/monitor.php
+++ b/web/skins/bootstrap/views/monitor.php
@@ -426,12 +426,10 @@ xhtmlHeaders(__FILE__, $SLANG['Monitor']." - ".validHtmlStr($monitor['Name']) );
 			<a href="#" onclick="createPopup( '?view=monitorprobe&amp;mid=<?= $monitor['Id'] ?>', 'zmMonitorProbe<?= $monitor['Id'] ?>', 'monitorprobe' ); return( false );"><?= $SLANG['Probe'] ?></a>
 			<a href="#" onclick="createPopup( '?view=monitorpreset&amp;mid=<?= $monitor['Id'] ?>', 'zmMonitorPreset<?= $monitor['Id'] ?>', 'monitorpreset' ); return( false );"><?= $SLANG['Presets'] ?></a>
 		</div>
-		<h2><?= $SLANG['Monitor'] ?> - <?= validHtmlStr($monitor['Name']) ?><?php if ( !empty($monitor['Id']) ) { ?> (<?= $monitor['Id'] ?>)<?php } ?></h2>
 	</div>
 
-	<div class="container-fluid">
-
-		<div class="container" ng-controller="MonitorController">
+	<div class="container-fluid" ng-controller="MonitorController">
+		<form ng-submit="submitMonitor(formMonitor.$valid)" name="formMonitor" novalidate>
 			<ul class="nav nav-tabs" role="tablist" id="tabMonitorAdd">
 				<li class="active" role="presentation"><a href="#general" aria-expanded="true" aria-controls="general" role="tab" data-toggle="tab">General</a></li>
 				<li role="presentation"><a href="#source" aria-controls="source" role="tab" data-toggle="tab">Source</a></li>
@@ -447,8 +445,9 @@ xhtmlHeaders(__FILE__, $SLANG['Monitor']." - ".validHtmlStr($monitor['Name']) );
 				<?php include("tab-monitor-buffers.php"); ?>
 				<?php include("tab-monitor-misc.php"); ?>
 			</div> <!-- End .tab-content -->
-		</div>
 
+			<button type="submit" class="btn btn-success btn-block" ng-disabled="formMonitor.$invalid">Save</button>
+		</form>
 	</div> <!-- End .container-fluid -->
 	<?php include("footer.php"); ?>
 </body>
diff --git a/web/skins/bootstrap/views/tab-monitor-buffers.php b/web/skins/bootstrap/views/tab-monitor-buffers.php
index eb72ae8d5..d77492a0b 100644
--- a/web/skins/bootstrap/views/tab-monitor-buffers.php
+++ b/web/skins/bootstrap/views/tab-monitor-buffers.php
@@ -1,26 +1,26 @@
 <div role="tabpanel" class="tab-pane" id="buffers">
 	<div class="form-group">
 		<label for="ImageBufferCount"><?= $SLANG['ImageBufferSize'] ?></label>
-		<input id="ImageBufferCount" type="number" class="form-control" name="newMonitor[ImageBufferCount]" value="100" />
+		<input id="ImageBufferCount" type="number" class="form-control" ng-model="monitor.ImageBufferCount" required />
 	</div>
 	<div class="form-group">
 		<label for="WarmupCount"><?= $SLANG['WarmupFrames'] ?></label>
-		<input id="WarmupCount" type="number" class="form-control" name="newMonitor[WarmupCount]" value="25" />
+		<input id="WarmupCount" type="number" class="form-control" ng-model="monitor.WarmupCount" required />
 	</div>
 	<div class="form-group">
 		<label for="PreEventCount"><?= $SLANG['PreEventImageBuffer'] ?></label>
-		<input id="PreEventCount" type="number" class="form-control" name="newMonitor[PreEventCount]" value="50" />
+		<input id="PreEventCount" type="number" class="form-control" ng-model="monitor.PreEventCount" required />
 	</div>
 	<div class="form-group">
 		<label for="PostEventCount"><?= $SLANG['PostEventImageBuffer'] ?></label>
-		<input id="PostEventCount" type="number" class="form-control" name="newMonitor[PostEventCount]" value="50" />
+		<input id="PostEventCount" type="number" class="form-control" ng-model="monitor.PostEventCount" required />
 	</div>
 	<div class="form-group">
 		<label for="StreamReplayBuffer"><?= $SLANG['StreamReplayBuffer'] ?></label>
-		<input id="StreamReplayBuffer" type="number" class="form-control" name="newMonitor[StreamReplayBuffer]" value="1000" />
+		<input id="StreamReplayBuffer" type="number" class="form-control" ng-model="monitor.StreamReplayBuffer" required />
 	</div>
 	<div class="form-group">
 		<label for="AlarmFrameCount"><?= $SLANG['AlarmFrameCount'] ?></label>
-		<input id="AlarmFrameCount" type="number" class="form-control" name="newMonitor[AlarmFrameCount]" value="1" />
+		<input id="AlarmFrameCount" type="number" class="form-control" ng-model="monitor.AlarmFrameCount" required />
 	</div>
 </div>
diff --git a/web/skins/bootstrap/views/tab-monitor-curl.php b/web/skins/bootstrap/views/tab-monitor-curl.php
index 67486f399..f06d824f2 100644
--- a/web/skins/bootstrap/views/tab-monitor-curl.php
+++ b/web/skins/bootstrap/views/tab-monitor-curl.php
@@ -1,4 +1,14 @@
-
-            <tr><td><?= "URL" ?></td><td><input type="text" name="newMonitor[Path]" value="<?= validHtmlStr($newMonitor['Path']) ?>" size="36"/></td></tr>
-            <tr><td><?= "Username" ?></td><td><input type="text" name="newMonitor[User]" value="<?= validHtmlStr($newMonitor['User']) ?>" size="12"/></td></tr>
-            <tr><td><?= "Password" ?></td><td><input type="text" name="newMonitor[Pass]" value="<?= validHtmlStr($newMonitor['Pass']) ?>" size="12"/></td></tr>
+<div ng-show="monitor.sourceType == 'cURL'">
+	<div class="form-group">
+		<label><?= "URL" ?></label>
+		<input class="form-control" type="text" ng-model="monitor.Path" />
+	</div>
+	<div class="form-group">
+		<label><?= "Username" ?></label>
+		<input class="form-control" type="text" ng-model="monitor.User" />
+	</div>
+	<div class="form-group">
+		<label><?= "Password" ?></label>
+		<input class="form-control" type="text" ng-model="monitor.Pass" />
+	</div>
+</div>
diff --git a/web/skins/bootstrap/views/tab-monitor-ffmpeg-vlc.php b/web/skins/bootstrap/views/tab-monitor-ffmpeg-vlc.php
index a0a9927b8..35f4b0b2c 100644
--- a/web/skins/bootstrap/views/tab-monitor-ffmpeg-vlc.php
+++ b/web/skins/bootstrap/views/tab-monitor-ffmpeg-vlc.php
@@ -1,4 +1,17 @@
+<div ng-show="monitor.sourceType == 'Libvlc' || sourceType == 'Ffmpeg'">
+	<div class="form-group">
+		<label><?= $SLANG['SourcePath'] ?></label>
+		<input class="form-control" type="text" ng-model="monitor.Path" />
+	</div>
 
-			<tr><td><?= $SLANG['SourcePath'] ?></td><td><input type="text" name="newMonitor[Path]" value="<?= validHtmlStr($newMonitor['Path']) ?>" size="36"/></td></tr>
-            <tr><td><?= $SLANG['RemoteMethod'] ?></td><td><?= buildSelect( "newMonitor[Method]", $rtspMethods ); ?></td></tr>
-			<tr><td><?= $SLANG['Options'] ?>&nbsp;(<?= makePopupLink( '?view=optionhelp&amp;option=OPTIONS_'.strtoupper($newMonitor['Type']), 'zmOptionHelp', 'optionhelp', '?' ) ?>)</td><td><input type="text" name="newMonitor[Options]" value="<?= validHtmlStr($newMonitor['Options']) ?>" size="36"/></td></tr>
+	<div class="form-group">
+		<label><?= $SLANG['RemoteMethod'] ?></label>
+		<?= buildSelect( "newMonitor[Method]", $rtspMethods ); ?>
+	</div>
+
+
+	<div class="form-group">
+		<label><?= $SLANG['Options'] ?>&nbsp;(<?= makePopupLink( '?view=optionhelp&amp;option=OPTIONS_'.strtoupper($newMonitor['Type']), 'zmOptionHelp', 'optionhelp', '?' ) ?>)</label>
+		<input class="form-control" type="text" ng-model="monitor.Options" />
+	</div>
+</div>
diff --git a/web/skins/bootstrap/views/tab-monitor-file.php b/web/skins/bootstrap/views/tab-monitor-file.php
index e554c95c3..93d3ab70c 100644
--- a/web/skins/bootstrap/views/tab-monitor-file.php
+++ b/web/skins/bootstrap/views/tab-monitor-file.php
@@ -1,2 +1,6 @@
-
-            <tr><td><?= $SLANG['SourcePath'] ?></td><td><input type="text" name="newMonitor[Path]" value="<?= validHtmlStr($newMonitor['Path']) ?>" size="36"/></td></tr>
+<div ng-show="monitor.sourceType == 'file'">            
+	<div class="form-group">
+		<label><?= $SLANG['SourcePath'] ?></label>
+		<input type="text" ng-model="monitor.Path" />
+	</div>
+</div>
diff --git a/web/skins/bootstrap/views/tab-monitor-general.php b/web/skins/bootstrap/views/tab-monitor-general.php
index 09d2ef9a6..89be75cf7 100644
--- a/web/skins/bootstrap/views/tab-monitor-general.php
+++ b/web/skins/bootstrap/views/tab-monitor-general.php
@@ -6,11 +6,11 @@
 
 	<div class="form-group">
 		<label for="Name"><?= $SLANG['Name'] ?></label>
-		<input type="text" id="Name" class="form-control" ng-model="Name" placeholder="Monitor-Name" />
+		<input type="text" id="Name" class="form-control" ng-model="monitor.Name" placeholder="Monitor-Name" required />
 	</div>
 	<div class="form-group">
 		<label for="SourceType"><?= $SLANG['SourceType'] ?></label>
-		<select ng-model="sourceType" id="SourceType" class="form-control">
+		<select ng-model="monitor.sourceType" id="SourceType" class="form-control" required>
 			<option value="Local">Local</option>
 			<option value="Remote">Remote</option>
 			<option value="File">File</option>
@@ -21,7 +21,7 @@
 	</div>
 	<div class="form-group">
 		<label for="Function"><?= $SLANG['Function'] ?></label>
-		<select class="form-control" id="Function" ng-model="Function">
+		<select class="form-control" id="Function" ng-model="monitor.Function" required>
 			<option value="None">None</option>
 			<option value="Monitor" selected="selected">Monitor</option>
 			<option value="Modect">Modect</option>
@@ -32,7 +32,7 @@
 	</div>
 	<div class="checkbox">
 		<label>
-			<input type="checkbox" id="Enabled" ng-model="Enabled" value="1"<?php if ( !empty($newMonitor['Enabled']) ) { ?> checked="checked"<?php } ?>/>
+			<input type="checkbox" id="Enabled" ng-model="monitor.Enabled" value="1"<?php if ( !empty($newMonitor['Enabled']) ) { ?> checked="checked"<?php } ?>/>
 			Enabled
 		</label>
 	</div>
@@ -42,60 +42,64 @@
 ?>
 	<div class="form-group">
 		<label for=""><?= $SLANG['RefImageBlendPct'] ?></label>
-<select class="form-control" ng-model="RefBlendPerc"><?php foreach ( $fastblendopts as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['RefBlendPerc'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select></div>
+<select class="form-control" ng-model="monitor.RefBlendPerc"><?php foreach ( $fastblendopts as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['RefBlendPerc'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select></div>
 	<div class="form-group">
 		<label for=""><?= "Alarm " . $SLANG['RefImageBlendPct'] ?></label>
-<select class="form-control" ng-model="AlarmRefBlendPerc"><?php foreach ( $fastblendopts_alarm as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['AlarmRefBlendPerc'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select></div>
+<select class="form-control" ng-model="monitor.AlarmRefBlendPerc"><?php foreach ( $fastblendopts_alarm as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['AlarmRefBlendPerc'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select></div>
 <?php
 	} else {
 ?>
 	<div class="form-group">
 		<label for=""><?= $SLANG['RefImageBlendPct'] ?></label>
-		<input type="text" class="form-control" ng-model="RefBlendPerc" value="6" />
+		<input type="text" class="form-control" ng-model="monitor.RefBlendPerc" value="6" />
 	</div>
 	<div class="form-group">
 		<label for=""><?= "Alarm " . $SLANG['RefImageBlendPct'] ?></label>
-		<input type="text" class="form-control" ng-model="AlarmRefBlendPerc" value="6" />
+		<input type="text" class="form-control" ng-model="monitor.AlarmRefBlendPerc" value="6" />
 	</div>
 <?php
         }
 ?>
-	<div class="form-group" ng-show="sourceType == 'Local'">
+	<div class="form-group" ng-show="monitor.sourceType == 'Local'">
 		<label for="MaxFPS"><?= $SLANG['MaximumFPS'] ?></label>
-		<input type="number" id="MaxFPS" class="form-control" ng-model="MaxFPS" />
+		<input type="number" id="MaxFPS" class="form-control" ng-model="monitor.MaxFPS" />
 	</div>
-	<div class="form-group" ng-show="sourceType == 'Local'">
+	<div class="form-group" ng-show="monitor.sourceType == 'Local'">
 		<label for="AlarmMaxFPS"><?= $SLANG['AlarmMaximumFPS'] ?></label>
-		<input type="number" id="AlarmMaxFPS" class="form-control" ng-model="AlarmMaxFPS" />
+		<input type="number" id="AlarmMaxFPS" class="form-control" ng-model="monitor.AlarmMaxFPS" />
 	</div>
 	</div> <!-- End .col-md-6 -->
 
 	<div class="col-md-4">
 		<div class="form-group">
  			<label for=""><?= "Target Colorspace" ?></label>
-			<select class="form-control" name="newMonitor[Colours]"><?php foreach ( $Colours as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Colours'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select>
+			<select required class="form-control" ng-model="monitor.Colours">
+				<?php foreach ( $Colours as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Colours'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?>
+			</select>
 		</div>
 
 		<div class="form-group">
  			<label for=""><?= $SLANG['CaptureWidth'] ?> (<?= $SLANG['Pixels'] ?>)</label>
-			<input class="form-control" type="number" name="newMonitor[Width]" value="<?= validHtmlStr($newMonitor['Width']) ?>" size="4" onkeyup="updateMonitorDimensions(this);"/>
+			<input class="form-control" type="number" ng-model="monitor.Width" ng-maxlength="4" placeholder="704" />
 		</div>
 
 		<div class="form-group">
  			<label for=""><?= $SLANG['CaptureHeight'] ?> (<?= $SLANG['Pixels'] ?>)</label>
-			<input class="form-control" type="number" name="newMonitor[Height]" value="<?= validHtmlStr($newMonitor['Height']) ?>" size="4" onkeyup="updateMonitorDimensions(this);"/>
+			<input class="form-control" type="number" ng-model="monitor.Height" ng-maxlength="4" placeholder="480" />
 		</div>
 
 		<div class="checkbox">
  			<label>
-				<input type="checkbox" name="preserveAspectRatio" value="1"/>
+				<input type="checkbox" ng-model="monitor.preserveAspectRatio" value="1"/>
 				<?= $SLANG['PreserveAspect'] ?>
 			</label>
 		</div>
 
 		<div class="form-group">
  			<label for=""><?= $SLANG['Orientation'] ?></label>
-			<select class="form-control" name="newMonitor[Orientation]"><?php foreach ( $orientations as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Orientation'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select>
+			<select class="form-control" ng-model="monitor.Orientation" required>
+				<?php foreach ( $orientations as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Orientation'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?>
+			</select>
 		</div>
 	</div> <!-- End .col-md-6 -->
 
@@ -103,6 +107,8 @@
 
 
 	<?php include("tab-monitor-local.php"); ?>
+	<?php include("tab-monitor-curl.php"); ?>
+	<?php include("tab-monitor-ffmpeg-vlc.php"); ?>
 	<?php include("tab-monitor-remote.php"); ?>
 
 	</div> <!-- End .col-md-4 -->
diff --git a/web/skins/bootstrap/views/tab-monitor-local.php b/web/skins/bootstrap/views/tab-monitor-local.php
index 604ada7b0..07574ccd8 100644
--- a/web/skins/bootstrap/views/tab-monitor-local.php
+++ b/web/skins/bootstrap/views/tab-monitor-local.php
@@ -1,8 +1,8 @@
-<div ng-show="sourceType == 'Local'">
+<div ng-show="monitor.sourceType == 'Local'">
 
 	<div class="form-group">
 		<label for=""><?= $SLANG['DevicePath'] ?></label>
-		<input type="text" class="form-control" name="newMonitor[Device]" value="<?= validHtmlStr($newMonitor['Device']) ?>" size="24"/>
+		<input type="text" class="form-control" ng-model="monitor.Device" ng-required="monitor.sourceType == 'Local'"/>
 	</div>
 
 	<div class="form-group">
@@ -16,17 +16,17 @@
 
 <div class="form-group">
             <label for=""><?= $SLANG['DeviceChannel'] ?></label>
-	<select name="newMonitor[Channel]"><?php foreach ( $v4l1DeviceChannels as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Channel'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select>
+	<select ng-model="monitor.Channel"><?php foreach ( $v4l1DeviceChannels as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Channel'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select>
 </div>
 
 <div class="form-group">
             <label for=""><?= $SLANG['DeviceFormat'] ?></label>
-	<select name="newMonitor[Format]"><?php foreach ( $v4l1DeviceFormats as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Format'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select>
+	<select ng-model="monitor.Format"><?php foreach ( $v4l1DeviceFormats as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Format'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select>
 </div>
 
 <div class="form-group">
             <label for=""><?= $SLANG['CapturePalette'] ?></label>
-	<select name="newMonitor[Palette]"><?php foreach ( $v4l1LocalPalettes as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Palette'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select>
+	<select ng-model="monitor.Palette"><?php foreach ( $v4l1LocalPalettes as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Palette'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select>
 </div>
 <?php
             }
@@ -36,17 +36,17 @@
 
 <div class="form-group">
             <label for=""><?= $SLANG['DeviceChannel'] ?></label>
-	<select name="newMonitor[Channel]"><?php foreach ( $v4l2DeviceChannels as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Channel'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select>
+	<select ng-model="monitor.Channel"><?php foreach ( $v4l2DeviceChannels as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Channel'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select>
 </div>
 
 <div class="form-group">
             <label for=""><?= $SLANG['DeviceFormat'] ?></label>
-	<select name="newMonitor[Format]"><?php foreach ( $v4l2DeviceFormats as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Format'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select>
+	<select ng-model="monitor.Format"><?php foreach ( $v4l2DeviceFormats as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Format'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select>
 </div>
 
 <div class="form-group">
             <label for=""><?= $SLANG['CapturePalette'] ?></label>
-	<select name="newMonitor[Palette]"><?php foreach ( $v4l2LocalPalettes as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Palette'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select>
+	<select ng-model="monitor.Palette"><?php foreach ( $v4l2LocalPalettes as $name => $value ) { ?><option value="<?= $value ?>"<?php if ( $value == $newMonitor['Palette'] ) { ?> selected="selected"<?php } ?>><?= $name ?></option><?php } ?></select>
 </div>
 <?php
             }
@@ -55,15 +55,15 @@
 			<?= $SLANG['V4LMultiBuffer'] ?>
 
 		<label>
-			<input type="radio" name="newMonitor[V4LMultiBuffer]" id="newMonitor[V4LMultiBuffer]1" value="1" <?php echo ( $newMonitor['V4LMultiBuffer'] == 1 ? 'checked="checked"' : '' ) ?>/>
+			<input type="radio" ng-model="monitor.V4LMultiBuffer" id="newMonitor[V4LMultiBuffer]1" value="1" <?php echo ( $newMonitor['V4LMultiBuffer'] == 1 ? 'checked="checked"' : '' ) ?>/>
 			Yes
 		</label>
 		<label>
-			<input type="radio" name="newMonitor[V4LMultiBuffer]" id="newMonitor[V4LMultiBuffer]0" value="0" <?php echo ( $newMonitor['V4LMultiBuffer'] == 0 ? 'checked="checked"' : '' ) ?>/>
+			<input type="radio" ng-model="monitor.V4LMultiBuffer" id="newMonitor[V4LMultiBuffer]0" value="0" <?php echo ( $newMonitor['V4LMultiBuffer'] == 0 ? 'checked="checked"' : '' ) ?>/>
 			No
 		</label>
 		<label>
-			<input type="radio" name="newMonitor[V4LMultiBuffer]" id="newMonitor[V4LMultiBuffer]" value="" <?php echo ( empty($newMonitor['V4LMultiBuffer']) ? 'checked="checked"' : '' ) ?>/>
+			<input type="radio" ng-model="monitor.V4LMultiBuffer" id="newMonitor[V4LMultiBuffer]" value="" <?php echo ( empty($newMonitor['V4LMultiBuffer']) ? 'checked="checked"' : '' ) ?>/>
 			Use Config Value
 		</label>
 			</div>
@@ -71,6 +71,6 @@
 
 	<div class="form-group">
 		<label for=""><?= $SLANG['V4LCapturesPerFrame'] ?></label>
-		<input type="number" name="newMonitor[V4LCapturesPerFrame]" value="<?php echo $newMonitor['V4LCapturesPerFrame'] ?>"/>
+		<input type="number" ng-model="monitor.V4LCapturesPerFrame" value="<?php echo $newMonitor['V4LCapturesPerFrame'] ?>"/>
 	</div>
 </div> <!-- End local -->
diff --git a/web/skins/bootstrap/views/tab-monitor-misc.php b/web/skins/bootstrap/views/tab-monitor-misc.php
index 4f5172073..6c8a7eb9a 100644
--- a/web/skins/bootstrap/views/tab-monitor-misc.php
+++ b/web/skins/bootstrap/views/tab-monitor-misc.php
@@ -1,12 +1,12 @@
-<div role="tabpanel" class="form-horizontal tab-pane" id="misc">
+<div role="tabpanel" class="tab-pane" id="misc">
 
 
-            <div class="form-group"><label><?= $SLANG['EventPrefix'] ?></label><input type="text" name="newMonitor[EventPrefix]" value="<?= validHtmlStr($newMonitor['EventPrefix']) ?>" size="24"/></div>
-            <div class="form-group"><label><?= $SLANG['Sectionlength'] ?></label><input type="text" name="newMonitor[SectionLength]" value="<?= validHtmlStr($newMonitor['SectionLength']) ?>" size="6"/></div>
-            <div class="form-group"><label><?= $SLANG['FrameSkip'] ?></label><input type="text" name="newMonitor[FrameSkip]" value="<?= validHtmlStr($newMonitor['FrameSkip']) ?>" size="6"/></div>
-            <div class="form-group"><label><?= $SLANG['MotionFrameSkip'] ?></label><input type="text" name="newMonitor[MotionFrameSkip]" value="<?= validHtmlStr($newMonitor['MotionFrameSkip']) ?>" size="6"/></div>
-            <div class="form-group"><label><?= $SLANG['FPSReportInterval'] ?></label><input type="text" name="newMonitor[FPSReportInterval]" value="<?= validHtmlStr($newMonitor['FPSReportInterval']) ?>" size="6"/></div>
-            <div class="form-group"><label><?= $SLANG['DefaultView'] ?></label><select name="newMonitor[DefaultView]">
+            <div class="form-group"><label><?= $SLANG['EventPrefix'] ?></label><input class="form-control" type="text" ng-model="monitor.EventPrefix" /></div>
+            <div class="form-group"><label><?= $SLANG['Sectionlength'] ?></label><input class="form-control" type="text" ng-model="monitor.SectionLength" /></div>
+            <div class="form-group"><label><?= $SLANG['FrameSkip'] ?></label><input class="form-control" type="text" ng-model="monitor.FrameSkip" /></div>
+            <div class="form-group"><label><?= $SLANG['MotionFrameSkip'] ?></label><input class="form-control" type="text" ng-model="monitor.MotionFrameSkip" /></div>
+            <div class="form-group"><label><?= $SLANG['FPSReportInterval'] ?></label><input class="form-control" type="text" ng-model="monitor.FPSReportInterval" /></div>
+            <div class="form-group"><label><?= $SLANG['DefaultView'] ?></label><select class="form-control" ng-model="monitor.DefaultView">
 <?php
         foreach ( getEnumValues( 'Monitors', 'DefaultView' ) as $opt_view )
         {
@@ -18,23 +18,19 @@
         }
 ?>
             </select></div>
-            <div class="form-group"><label><?= $SLANG['DefaultRate'] ?></label><?= buildSelect( "newMonitor[DefaultRate]", $rates ); ?></div>
-            <div class="form-group"><label><?= $SLANG['DefaultScale'] ?></label><?= buildSelect( "newMonitor[DefaultScale]", $scales ); ?></div>
-<?php
-        if ( ZM_HAS_V4L && $newMonitor['Type'] == "Local" )
-        {
-?>
-            <div class="form-group"><label><?= $SLANG['SignalCheckColour'] ?></label><input type="text" name="newMonitor[SignalCheckColour]" value="<?= validHtmlStr($newMonitor['SignalCheckColour']) ?>" size="10" onchange="$('SignalCheckSwatch').setStyle( 'backgroundColor', this.value )"/><span id="SignalCheckSwatch" class="swatch" style="background-color: <?= $newMonitor['SignalCheckColour'] ?>;">&nbsp;&nbsp;&nbsp;&nbsp;</span></div>
-<?php
-        }
-?>
-            <div class="form-group"><label><?= $SLANG['WebColour'] ?></label><input type="text" name="newMonitor[WebColour]" value="<?= validHtmlStr($newMonitor['WebColour']) ?>" size="10" onchange="$('WebSwatch').setStyle( 'backgroundColor', this.value )"/><span id="WebSwatch" class="swatch" style="background-color: <?= validHtmlStr($newMonitor['WebColour']) ?>;">&nbsp;&nbsp;&nbsp;&nbsp;</span></div>
+            <div class="form-group"><label><?= $SLANG['DefaultRate'] ?></label><?= buildSelect( "newMonitor[DefaultRate", $rates ); ?></div>
+            <div class="form-group"><label><?= $SLANG['DefaultScale'] ?></label><?= buildSelect( "newMonitor[DefaultScale", $scales ); ?></div>
+            <div ng-show="monitor.sourceType == 'Local'" class="form-group"><label><?= $SLANG['SignalCheckColour'] ?></label><input class="form-control" type="text" ng-model="monitor.SignalCheckColour" onchange="$('SignalCheckSwatch').setStyle( 'backgroundColor', this.value )"/><span id="SignalCheckSwatch" class="swatch" style="background-color: <?= $newMonitor['SignalCheckColour'] ?>;">&nbsp;&nbsp;&nbsp;&nbsp;</span></div>
+	<div class="form-group">
+		<label><?= $SLANG['WebColour'] ?></label>
+		<input class="form-control" type="text" ng-model="monitor.WebColour" style="color: {{ monitor.WebColour}};" required />
+	</div>
 
 
 
             <div class="form-group">
               <label><?= $SLANG['LinkedMonitors'] ?></label>
-                <select name="monitorIds" size="4" multiple="multiple" onchange="updateLinkedMonitors( this )">
+                <select class="form-control" ng-model="monitor.monitorIds" multiple="multiple" onchange="updateLinkedMonitors( this )">
 <?php
     $monitors = dbFetchAll( "select Id,Name from Monitors order by Sequence asc" );
     if ( !empty($newMonitor['LinkedMonitors']) )
@@ -52,7 +48,7 @@
     }
 ?>
                 </select>
-              </div>>
+              </div>
             <div class="form-group"><label><?= $SLANG['Triggers'] ?></label>
 <?php
         $optTriggers = getSetValues( 'Monitors', 'Triggers' );
@@ -66,7 +62,7 @@
             if ( $optCount && ($optCount%$breakCount == 0) )
                 echo "</br>";
 ?>
-              <input type="checkbox" name="newMonitor[Triggers][]" value="<?= $optTrigger ?>"<?php if ( isset($newMonitor['Triggers']) && in_array( $optTrigger, $newMonitor['Triggers'] ) ) { ?> checked="checked"<?php } ?>/>&nbsp;<?= $optTrigger ?>
+              <input class="form-control" type="checkbox" ng-model="monitor.Triggers" value="<?= $optTrigger ?>"<?php if ( isset($newMonitor['Triggers']) && in_array( $optTrigger, $newMonitor['Triggers'] ) ) { ?> checked="checked"<?php } ?>/>&nbsp;<?= $optTrigger ?>
 <?php
             $optCount ++;
         }
diff --git a/web/skins/bootstrap/views/tab-monitor-remote.php b/web/skins/bootstrap/views/tab-monitor-remote.php
index 337556635..5b594133a 100644
--- a/web/skins/bootstrap/views/tab-monitor-remote.php
+++ b/web/skins/bootstrap/views/tab-monitor-remote.php
@@ -1,37 +1,34 @@
-		<div ng-show="sourceType == 'Remote'">
+		<div ng-show="monitor.sourceType == 'Remote'">
 			<div class="form-group">
 				<label for="newMonitor[Protocol]"><?= $SLANG['RemoteProtocol'] ?></label>
-				<select ng-model="Protocol" id="newMonitor[Protocol]" onchange="updateMethods( this )">
+				<select class="form-control" ng-model="monitor.Protocol" id="newMonitor[Protocol]" ng-required="monitor.sourceType == 'Remote'">
 					<option value="http">HTTP</option>
 					<option value="rtsp">RTSP</option>
 				</select>
 			</div>
 			<div class="form-group">
 				<label for="newMonitor[Method]"><?= $SLANG['RemoteMethod'] ?></label>
-<?php if ( empty($newMonitor['Protocol']) || $newMonitor['Protocol'] == "http" ) { ?>
-				<select ng-model="Method" id="newMonitor[Method]">
+				<select class="form-control" ng-model="monitor.Method" id="newMonitor[Method]" ng-required="monitor.sourceType == 'Remote'" ng-show="monitor.Protocol == 'http'">
 					<option value="simple">Simple</option>
 					<option value="regexp">Regexp</option>
 				</select>
-<?php } else { ?>
-				<select ng-model="Method" id="newMonitor[Method]">
+				<select class="form-control" ng-model="monitor.Method" id="newMonitor[Method]" ng-required="monitor.sourceType == 'Remote'" ng-show="monitor.Protocol == 'rtsp'">
 					<option value="rtpUni">RTP/Unicast</option>
 					<option value="rtpMulti">RTP/Multicast</option>
 					<option value="rtpRtsp">RTP/RTSP</option>
 					<option value="rtpRtspHttp">RTP/RTSP/HTTP</option>
 				</select>
-<?php } ?>
 			</div>
 			<div class="form-group">
 				<label><?= $SLANG['RemoteHostName'] ?></label>
-				<input type="text" class="form-control" ng-model="Host" placeholder="HostName or ip.add.re.ss" />
+				<input type="text" class="form-control" ng-model="monitor.Host" placeholder="HostName or ip.add.re.ss" ng-required="monitor.sourceType == 'Remote'" />
 			</div>
 			<div class="form-group">
 				<label for=""><?= $SLANG['RemoteHostPort'] ?></label>
-				<input type="number" class="form-control" ng-model="Port" placeholder="Usually 80 for http, 554 for rtsp" />
+				<input type="number" class="form-control" ng-model="monitor.Port" placeholder="Usually 80 for http, 554 for rtsp" ng-required="monitor.sourceType == 'Remote'" />
 			</div>
 			<div class="form-group">
 				<label><?= $SLANG['RemoteHostPath'] ?></label>
-				<input type="text" class="form-control" ng-model="Path" placeholder="/path/to/stream.mpg" />
+				<input type="text" class="form-control" ng-model="monitor.Path" placeholder="/path/to/stream.mpg" ng-required="monitor.sourceType == 'Remote'" />
 			</div>
 	</div> <!-- End Remote -->
diff --git a/web/skins/bootstrap/views/tab-monitor-timestamp.php b/web/skins/bootstrap/views/tab-monitor-timestamp.php
index 9b76a4f80..ec7a08257 100644
--- a/web/skins/bootstrap/views/tab-monitor-timestamp.php
+++ b/web/skins/bootstrap/views/tab-monitor-timestamp.php
@@ -1,14 +1,14 @@
 <div role="tabpanel" class="tab-pane" id="timestamp">
 	<div class="form-group">
 		<label for="labelFormat"><?= $SLANG['TimestampLabelFormat'] ?></label>
-		<input type="text" id="labelFormat" class="form-control" name="newMonitor[LabelFormat]" value="%N - %d/%m/%y %H:%M:%S" />
+		<input type="text" id="labelFormat" class="form-control" ng-model="monitor.LabelFormat" required />
 	</div>
 	<div class="form-group">
 		<label for="labelX"><?= $SLANG['TimestampLabelX'] ?></label>
-		<input type="text" id="labelX" class="form-control" name="newMonitor[LabelX]" value="0" />
+		<input type="number" id="labelX" class="form-control" ng-model="monitor.LabelX" required />
 	</div>
 	<div class="form-group">
 		<label for="labelY"><?= $SLANG['TimestampLabelY'] ?></label>
-		<input type="text" id="labelY" class="form-control" name="newMonitor[LabelY]" value="0" />
+		<input type="number" id="labelY" class="form-control" ng-model="monitor.LabelY" required />
 	</div>
 </div>