[Layout] Refactor view switcher

Refactor view switcher to simplify it; treat it
as a representation of a domain object that modifies
an ng-model. This simplifies reuse, e.g. in frames
within a layout. WTD-535.

platform/commonUI/general/res/templates/controls/switcher.html

@@ -1,28 +1,33 @@
-<div class="menu-element btn icon-btn very-subtle btn-menu dropdown click-invoke"
-     ng-if="ngModel.options.length > 1">
+<span ng-controller="ViewSwitcherController">
 
-    <span ng-click="ngModel.expanded = !ngModel.expanded">
+    <div class="menu-element btn icon-btn very-subtle btn-menu dropdown click-invoke"
+         ng-if="view.length > 1"
+         ng-controller="ClickAwayController as toggle">
+
+        <span ng-click="toggle.toggle()">
+            <span class="ui-symbol icon type-icon">{{ngModel.selected.glyph}}</span>
+            <span>{{ngModel.selected.name}}</span>
+            <span class='ui-symbol icon invoke-menu'>v</span>
+        </span>
+
+        <div class="menu dropdown" ng-show="toggle.isActive()">
+            <ul>
+                <li ng-repeat="option in view">
+                    <a href="" ng-click="ngModel.selected = option; toggle.setState(false)">
+                        <span class="ui-symbol type-icon icon">
+                            {{option.glyph}}
+                        </span>
+                        {{option.name}}
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+
+    <span class="btn"
+          ng-if="view.length === 1">
         <span class="ui-symbol icon type-icon">{{ngModel.selected.glyph}}</span>
         <span>{{ngModel.selected.name}}</span>
-        <span class='ui-symbol icon invoke-menu'>v</span>
     </span>
 
-    <div class="menu dropdown" ng-show="ngModel.expanded">
-        <ul>
-            <li ng-repeat="option in ngModel.options">
-                <a href="" ng-click="ngModel.selected = option; ngModel.expanded = false;">
-                    <span class="ui-symbol type-icon icon">
-                        {{option.glyph}}
-                    </span>
-                    {{option.name}}
-                </a>
-            </li>
-        </ul>
-    </div>
-</div>
-
-<span class="btn"
-      ng-if="ngModel.options.length === 1">
-    <span class="ui-symbol icon type-icon">{{ngModel.selected.glyph}}</span>
-    <span>{{ngModel.selected.name}}</span>
 </span>