Fixing style of toolbox on changes

frontend/js/ng.js

@@ -152,12 +152,19 @@
 		};
 	});
 
+	facilpadApp.directive("fpVariableMenuItem", function() {
+		return {
+			restrict: 'A',
+			link: function(scope, element, attrs) {
+				if($("#toolbox").hasClass("ui-menu"))
+					setTimeout(function() { $("#toolbox").menu("destroy").menu() }, 0);
+			}
+		}
+	});
+
 	facilpadApp.controller("PadCtrl", function($scope, socket, $timeout, $sce, $parse) {
 
 		setTimeout(function() { $("#toolbox").menu(); }, 0);
-		function updateMenu() {
-			setTimeout(function() { $("#toolbox").menu("destroy").menu(); }, 0);
-		}
 
 		$scope.padData = null;
 		$scope.loaded = false;
@@ -219,10 +226,6 @@
 				$scope.closeDialog();
 		});
 
-		$scope.$watch("layers", function() {
-			updateMenu();
-		});
-
 		fp.mapEvents.on("moveEnd", function(e, bbox) {
 			socket.emit("updateBbox", bbox);
 
@@ -264,8 +267,6 @@
 				$scope.currentLine.descriptionHtml = $scope.marked($scope.currentLine.description);
 		});
 
-		$scope.$watch("views", updateMenu);
-
 		$scope.marked = function(text) {
 			return text != null ? $sce.trustAsHtml(marked(text)) : null;
 		};

frontend/pad.html

@@ -20,12 +20,12 @@
 			<li><a href="javascript:" ng-click="addMarker()" ng-hide="readonly">Add marker</a></li>
 			<li><a href="javascript:" ng-click="addLine()" ng-hide="readonly">Add line</a></li>
 			<li><a href="javascript:">Views</a><ul>
-				<li ng-repeat="(id, view) in views"><a href="javascript:" ng-click="displayView(view)">{{view.name}}</a></li>
+				<li ng-repeat="(id, view) in views" fp-variable-menu-item><a href="javascript:" ng-click="displayView(view)">{{view.name}}</a></li>
 				<li><a href="javascript:" ng-click="openDialog('save-view-dialog')" ng-hide="readonly">Save current view</a></li>
 				<li><a href="javascript:" ng-click="openDialog('manage-views-dialog')" ng-hide="readonly">Manage views</a></li>
 			</ul></li>
 			<li><a href="javascript:">Layers</a><ul>
-				<li ng-repeat="layer in layers">
+				<li ng-repeat="layer in layers" fp-variable-menu-item>
 					<a href="javascript:" ng-click="setLayer(layer)">
 						<input type="{{layer.isBaseLayer ? 'radio' : 'checkbox'}}" ng-checked="layer.visibility" />
 						{{layer.name}}