From aee229e7002019fed3c354cb3a1297e2df41df3d Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Mon, 13 Jul 2015 15:22:58 -0400
Subject: [PATCH] (js) Make use of 'controllerAs' in Mailer module

---
 UI/Templates/MailerUI/UIxMailEditor.wox       | 347 +++++++++---------
 .../MailerUI/UIxMailFolderTemplate.wox        |  16 +-
 UI/Templates/MailerUI/UIxMailMainFrame.wox    | 169 ++++-----
 UI/Templates/MailerUI/UIxMailViewTemplate.wox |  59 ++-
 UI/WebServerResources/js/Mailer.app.js        |  65 ++--
 .../js/Mailer/Account.service.js              |  20 +-
 .../js/Mailer/Mailbox.service.js              |   1 +
 .../js/Mailer/MailboxController.js            |  64 +++-
 .../js/Mailer/MailboxesController.js          | 139 +++----
 .../js/Mailer/Message.service.js              |  21 +-
 .../js/Mailer/MessageController.js            |  34 +-
 .../js/Mailer/MessageEditorController.js      | 111 +++---
 12 files changed, 543 insertions(+), 503 deletions(-)

diff --git a/UI/Templates/MailerUI/UIxMailEditor.wox b/UI/Templates/MailerUI/UIxMailEditor.wox
index 5de202624..b274ce058 100644
--- a/UI/Templates/MailerUI/UIxMailEditor.wox
+++ b/UI/Templates/MailerUI/UIxMailEditor.wox
@@ -1,182 +1,185 @@
 <?xml version="1.0" standalone="yes"?>
-<!DOCTYPE container>
 <container
     xmlns="http://www.w3.org/1999/xhtml"
     xmlns:var="http://www.skyrix.com/od/binding"
     xmlns:const="http://www.skyrix.com/od/constant"
-    xmlns:label="OGo:label"
-    xmlns:uix="OGo:uix"><var:string var:value="doctype" const:escapeHTML="NO" />
-  <div id="messageEditor">
-<md-content class="md-padding bg-sogoPaper-50">
-  <form>
-    <header>
+    xmlns:label="OGo:label">
 
-      <!-- FROM / TO / CC/ BCC / SUBJECT / ATTACHMENTS -->
-      <div class="msg-header-content">
-        <md-input-container>
-          <label> <var:string label:value="From"/></label>
-          <md-select name="from"
-                     ng-model="message.editable.from">
-            <md-option ng-value="identity" ng-repeat="identity in identities">{{identity}}</md-option>
-          </md-select>
-        </md-input-container>      
-        
-        <div class="pseudo-input-container">
-          <label class="pseudo-input-label">
-            <var:string label:value="To"/>
-          </label>
-          <md-chips ng-model="message.editable.to">
-            <md-autocomplete
-                md-selected-item="autocomplete.to.selected"
-                md-search-text="autocomplete.to.searchText"
-                md-items="user in userFilter(autocomplete.to.searchText)"
-                label:placeholder="Add a recipient">
-              <span md-highlight-text="autocomplete.to.searchText">{{user}}</span>
-            </md-autocomplete>
-          </md-chips>
-        </div>
-        
-        <div class="pseudo-input-container" ng-hide="hideCc">
-          <label class="pseudo-input-label">
-            <var:string label:value="Cc"/>
-          </label>
-          <md-chips ng-model="message.editable.cc">
-            <md-autocomplete
-                md-selected-item="autocomplete.cc.selected"
-                md-search-text="autocomplete.cc.searchText"
-                md-items="user in userFilter(autocomplete.cc.searchText)"
-                label:placeholder="Add a recipient">
-              <span md-highlight-text="autocomplete.cc.searchText">{{user}}</span>
-            </md-autocomplete>
-          </md-chips>
-        </div>
-        
-        <div class="pseudo-input-container" ng-hide="hideBcc">
-          <label class="pseudo-input-label">
-            <var:string label:value="Bcc"/>
-          </label>
-          <md-chips ng-model="message.editable.bcc">
-            <md-autocomplete
-                md-selected-item="autocomplete.bcc.selected"
-                md-search-text="autocomplete.bcc.searchText"
-                md-items="user in userFilter(autocomplete.bcc.searchText)"
-                label:placeholder="Add a recipient">
-              <span md-highlight-text="autocomplete.bcc.searchText">{{user}}</span>
-            </md-autocomplete>
-          </md-chips>
-        </div>
-        
-        <md-input-container>
-          <label>
-            <var:string label:value="Subject"/>
-          </label>
-          <input type="text" name="subject" ng-model="message.editable.subject"/>
-        </md-input-container>
-
-        <md-list>
-          <!-- FILES ALREADY UPLOADED, FOR EXAMPLE WHEN WE FORWARD A
-               MAIL WITH ATTACHMENTS -->
-          <md-list-item ng-repeat="item in message.editable.attachmentAttrs">
-            <div layout="row" layout-align="space-between center">
-              <span ng-bind="item.filename"><!-- filename --></span>
-              <md-button class="sg-icon-button"
-                         ng-click="message.$deleteAttachment(item.filename);">
-                <md-icon>remove_circle_outline</md-icon>
-              </md-button>
-            </div>
-          </md-list-item>
-          <!-- FILE BEING ATTACHED TO A MAIL -->
-          <md-list-item ng-repeat="item in uploader.queue">
-            <div layout="row" layout-align="space-between center">
-              <span ng-bind="item.file.name"><!-- filename --></span>
-              <md-progress-linear md-mode="determinate"
-                                  value="{{item.progress}}"
-                                  ng-show="item.isUploading" ><!-- progress--></md-progress-linear>
-              <md-button class="sg-icon-button"
-                         ng-click="uploader.cancelItem(item)"
-                         ng-show="item.isUploading">
-                <md-icon>cancel</md-icon>
-              </md-button>
-              <md-button class="sg-icon-button"
-                         ng-click="message.$deleteAttachment(item.file.name);item.remove();"
-                         ng-show="!item.isUploading">
-                <md-icon>remove_circle_outline</md-icon>
-              </md-button>
-            </div>
-          </md-list-item>
-        </md-list>
-      </div>
-      
-      <!-- </div> -->
-      
-      <!-- TOOLBAR TO SHOW CC/BCC/ATTACHMENT FIELDS -->
-      <div layout="column" layout-align="start end">
-        <md-button ng-show="hideCc" ng-click="hideCc = false">Cc</md-button>
-        <md-button ng-show="hideBcc" ng-click="hideBcc = false">Bcc</md-button>
-
-        <md-button>
-          <label for="file-input">
-            Add files
-          </label>
+  <md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main">
+    <div class="md-toolbar-tools md-toolbar-tools-top sg-padded" layout="row" layout-align="space-between start">
+      <div class="sg-toolbar-group-last">
+        <md-button class="sg-icon-button" label:aria-label="More">
+          <md-icon>more_vert</md-icon>
         </md-button>
-        <input id="file-input" type="file"
-               nv-file-select="nv-file-select"
-               multiple="multiple"
-               uploader="uploader"
-               ng-show="false"/>
-
-        <md-menu>
-          <md-button label:aria-label="More mail options" class="iconBtton" ng-click="$mdOpenMenu($event)">
-            <md-icon>more_vert</md-icon>
-          </md-button>
-          <md-menu-content width="4">
-            <md-menu-item>
-              <md-button>
-                <md-checkbox ng-model="message.editable.receipt">
-                  <var:string label:value="Receipt"/>
-                </md-checkbox>
-              </md-button>
-            </md-menu-item>
-            <md-menu-item>
-              <div layout="row" layout-align="center center">
-                <span>
-                  <var:string label:value="Priority"/>
-                </span>
-                <md-slider flex="flex"
-                           md-discrete="md-discrete"
-                           ng-model="message.editable.priority"
-                           step="1"
-                           min="1"
-                           max="5"
-                           label:aria-label="Priority">
-                </md-slider>
-              </div>
-            </md-menu-item>
-          </md-menu-content>
-        </md-menu>
-        
-      </div>
-      
-    </header>
-    
-    <!-- MESSAGE CONTENT -->
-    <textarea name="content" var:class="editorClass"
-              ng-model="message.editable.text"/>
-    
-    <!-- TOOLBAR BUTTONS -->
-    <div class="buttonsToolbar">
-      <div layout="row" layout-align="end center">
-        <md-button ng-click="cancel()"><var:string label:value="Cancel"/></md-button>
-        <md-button ng-click="message.$save()">
-          <var:string label:value="Save"/>
-        </md-button>
-        <md-button class="fg-sogoBlue-700 md-primary md-hue-3"
-                   ng-click="send(message)">
-          <var:string label:value="Send"/>
-          </md-button>
       </div>
     </div>
-  </form>
-</md-content>
-</div>
+  </md-toolbar>
+
+  <md-content class="md-padding bg-sogoPaper-50">
+    <form>
+      <header>
+
+        <!-- FROM / TO / CC/ BCC / SUBJECT / ATTACHMENTS -->
+        <div class="msg-header-content">
+          <md-input-container>
+            <label> <var:string label:value="From"/></label>
+            <md-select name="from"
+                       ng-model="editor.message.editable.from">
+              <md-option ng-value="identity" ng-repeat="identity in editor.identities">{{identity}}</md-option>
+            </md-select>
+          </md-input-container>
+
+          <div class="pseudo-input-container">
+            <label class="pseudo-input-label">
+              <var:string label:value="To"/>
+            </label>
+            <md-chips ng-model="editor.message.editable.to">
+              <md-autocomplete
+                  md-selected-item="editor.autocomplete.to.selected"
+                  md-search-text="editor.autocomplete.to.searchText"
+                  md-items="user in editor.userFilter(editor.autocomplete.to.searchText)"
+                  label:placeholder="Add a recipient">
+                <span md-highlight-text="editor.autocomplete.to.searchText">{{user}}</span>
+              </md-autocomplete>
+            </md-chips>
+          </div>
+
+          <div class="pseudo-input-container" ng-hide="editor.hideCc">
+            <label class="pseudo-input-label">
+              <var:string label:value="Cc"/>
+            </label>
+            <md-chips ng-model="editor.message.editable.cc">
+              <md-autocomplete
+                  md-selected-item="editor.autocomplete.cc.selected"
+                  md-search-text="editor.autocomplete.cc.searchText"
+                  md-items="user in editor.userFilter(editor.autocomplete.cc.searchText)"
+                  label:placeholder="Add a recipient">
+                <span md-highlight-text="editor.autocomplete.cc.searchText">{{user}}</span>
+              </md-autocomplete>
+            </md-chips>
+          </div>
+
+          <div class="pseudo-input-container" ng-hide="editor.hideBcc">
+            <label class="pseudo-input-label">
+              <var:string label:value="Bcc"/>
+            </label>
+            <md-chips ng-model="editor.message.editable.bcc">
+              <md-autocomplete
+                  md-selected-item="editor.autocomplete.bcc.selected"
+                  md-search-text="editor.autocomplete.bcc.searchText"
+                  md-items="user in editor.userFilter(editor.autocomplete.bcc.searchText)"
+                  label:placeholder="Add a recipient">
+                <span md-highlight-text="editor.autocomplete.bcc.searchText">{{user}}</span>
+              </md-autocomplete>
+            </md-chips>
+          </div>
+
+          <md-input-container>
+            <label>
+              <var:string label:value="Subject"/>
+            </label>
+            <input type="text" name="subject" ng-model="editor.message.editable.subject"/>
+          </md-input-container>
+
+          <md-list>
+            <!-- FILES ALREADY UPLOADED, FOR EXAMPLE WHEN WE FORWARD A
+                 MAIL WITH ATTACHMENTS -->
+            <md-list-item ng-repeat="item in editor.message.editable.attachmentAttrs">
+              <div layout="row" layout-align="space-between center">
+                <span ng-bind="item.filename"><!-- filename --></span>
+                <md-button class="sg-icon-button"
+                           ng-click="editor.message.$deleteAttachment(item.filename);">
+                  <md-icon>remove_circle_outline</md-icon>
+                </md-button>
+              </div>
+            </md-list-item>
+            <!-- FILE BEING ATTACHED TO A MAIL -->
+            <md-list-item ng-repeat="item in editor.uploader.queue">
+              <div layout="row" layout-align="space-between center">
+                <span ng-bind="item.file.name"><!-- filename --></span>
+                <md-progress-linear md-mode="determinate"
+                                    value="{{item.progress}}"
+                                    ng-show="item.isUploading" ><!-- progress--></md-progress-linear>
+                <md-button class="sg-icon-button"
+                           ng-click="editor.uploader.cancelItem(item)"
+                           ng-show="item.isUploading">
+                  <md-icon>cancel</md-icon>
+                </md-button>
+                <md-button class="sg-icon-button"
+                           ng-click="editor.message.$deleteAttachment(item.file.name); item.remove();"
+                           ng-show="!item.isUploading">
+                  <md-icon>remove_circle_outline</md-icon>
+                </md-button>
+              </div>
+            </md-list-item>
+          </md-list>
+        </div>
+
+        <!-- </div> -->
+
+        <!-- TOOLBAR TO SHOW CC/BCC/ATTACHMENT FIELDS -->
+        <div layout="column" layout-align="start end">
+          <md-button ng-show="editor.hideCc" ng-click="editor.hideCc = false">Cc</md-button>
+          <md-button ng-show="editor.hideBcc" ng-click="editor.hideBcc = false">Bcc</md-button>
+
+          <md-button>
+            <label for="file-input">
+              Add files
+            </label>
+          </md-button>
+          <input id="file-input" type="file"
+                 nv-file-select="nv-file-select"
+                 multiple="multiple"
+                 uploader="editor.uploader"
+                 ng-show="false"/>
+
+          <md-menu>
+            <md-button label:aria-label="More mail options" class="iconBtton" ng-click="$mdOpenMenu($event)">
+              <md-icon>more_vert</md-icon>
+            </md-button>
+            <md-menu-content width="4">
+              <md-menu-item>
+                <md-button>
+                  <md-checkbox ng-model="editor.message.editable.receipt">
+                    <var:string label:value="Receipt"/>
+                  </md-checkbox>
+                </md-button>
+              </md-menu-item>
+              <md-menu-item>
+                <div layout="row" layout-align="center center">
+                  <span>
+                    <var:string label:value="Priority"/>
+                  </span>
+                  <md-slider flex="flex"
+                             md-discrete="md-discrete"
+                             ng-model="editor.message.editable.priority"
+                             step="1"
+                             min="1"
+                             max="5"
+                             label:aria-label="Priority">
+                  </md-slider>
+                </div>
+              </md-menu-item>
+            </md-menu-content>
+          </md-menu>
+
+        </div>
+
+      </header>
+
+      <!-- MESSAGE CONTENT -->
+      <textarea name="content" var:class="editorClass"
+                ng-model="editor.message.editable.text"/>
+
+      <!-- TOOLBAR BUTTONS -->
+      <div class="buttonsToolbar">
+        <div layout="row" layout-align="end center">
+          <md-button ng-click="editor.cancel()"><var:string label:value="Cancel"/></md-button>
+          <md-button ng-click="editor.message.$save()"><var:string label:value="Save"/></md-button>
+          <md-button class="fg-sogoBlue-700 md-primary md-hue-3"
+                     ng-click="editor.send()"><var:string label:value="Send"/></md-button>
+        </div>
+      </div>
+    </form>
+  </md-content>
 </container>
diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
index 816f0524d..2a1fef060 100644
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -2,24 +2,24 @@
 <container
     xmlns="http://www.w3.org/1999/xhtml"
     xmlns:label="OGo:label">
-  <div class="view-list md-layout-fill" layout="column" flex="true" style="position: relative;">
+  <div class="view-list md-layout-fill md-flex" layout="column" style="position: relative;">
   <md-content id="messagesList">
     <style>
       .vs-repeat-repeated-element {
         width: 100%;
       }
     </style>
-    <md-progress-linear ng-show="mailbox.$isLoading" md-mode="indeterminate"><!-- progress --></md-progress-linear>
+    <md-progress-linear ng-show="mailbox.selectedFolder.$isLoading" md-mode="indeterminate"><!-- progress --></md-progress-linear>
     <header class="sg-md-subheader sg-md-subheader--fixed">
       <h2 class="sg-md-subhead-solo fg-sogoBlue-700">Messages</h2>
     </header>
     <md-list vs-repeat="72"
         vs-scroll-parent="#messagesList">
       <md-list-item
-          ng-repeat="currentMessage in mailbox.$messages track by currentMessage.id"
+          ng-repeat="currentMessage in mailbox.selectedFolder.$messages track by currentMessage.id"
           ng-class="{unread: !currentMessage.isread}"
-          ng-click="selectMessage(currentMessage)"
-          ui-sref="mail.account.mailbox.message({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: currentMessage.uid})"
+          ng-click="mailbox.selectMessage(currentMessage)"
+          ui-sref="mail.account.mailbox.message({accountId: mailbox.account.id, mailboxId: (mailbox.selectedFolder.path | encodeUri), messageId: currentMessage.uid})"
           ui-sref-active="sg-active">
         <div class="sg-selected-avatar" ng-show="currentMessage.selected"
              ng-click="currentMessage.selected = !currentMessage.selected">
@@ -38,7 +38,7 @@
           <div class="sg-md-subhead-multi">{{currentMessage.$shortAddress('from')}}</div>
           <div class="sg-md-body-multi">{{currentMessage.subject}}</div>
           <i class="icon-ion-refresh"
-             ng-hide="mailbox.$loadMessage(currentMessage.uid)"><!-- loading --></i>
+             ng-hide="mailbox.selectedFolder.$loadMessage(currentMessage.uid)"><!-- loading --></i>
         </div>
         <div class="sg-tile-icons">
           <md-icon ng-show="currentMessage.isflagged">star</md-icon>
@@ -51,13 +51,13 @@
   </md-content>
   <md-button class="md-fab md-fab-bottom-right md-accent"
              label:aria-label="Write a new message"
-             ui-sref="mail.newMessage()">
+             ui-sref="mail.account.mailbox.newMessage({accountId: mailbox.account.id, mailboxId: (mailbox.selectedFolder.path | encodeUri)})">
     <md-icon>add</md-icon>
   </md-button>
   </div>
 
   <!-- This extra container is used to animate views transitions
        double quotes in ng-animate is not a typo                         -->
-    <div ng-show="message" id="detailView" class="view-detail ng-cloak" layout="column" ui-view="message" ng-animate="'view'"><!-- message view --></div>
+    <div id="detailView" class="view-detail ng-cloak" layout="column" ui-view="message" ng-animate="'view'"><!-- message view --></div>
 
 </container>
diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox
index a682e4ff8..e632ac653 100644
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox
@@ -236,45 +236,47 @@
     <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1 md-layout-fill" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
       <var:component className="UIxSidenavToolbarTemplate" />
       <md-content md-scroll-y="md-scroll-y" class="md-flex">
-        <section ng-repeat="account in accounts track by account.id">
+        <section ng-repeat="account in app.accounts track by account.id">
           <md-subheader class="sg-md-subheader">
             <div layout="row" layout-align="space-between center">
               <span>{{account.name}}</span>
+              <div>
               <md-button class="sg-icon-button"
                          label:aria-label="New Folder..."
-                         ng-click="newFolder(account)">
+                         ng-click="app.newFolder(account)">
                 <md-icon>add_circle_outline</md-icon>
               </md-button>
               <md-button class="sg-icon-button"
                          ng-show="account.id == 0"
                          label:aria-label="Delegation..."
-                         ng-click="delegate(account)">
+                         ng-click="app.delegate(account)">
                 <md-icon>people</md-icon>
               </md-button>
+              </div>
             </div>
           </md-subheader>
           <md-list>
             <md-list-item ng-repeat="folder in account.$flattenMailboxes() track by folder.path"
-                          ng-click="selectFolder(account, folder)"
-                          ng-dblclick="editFolder(folder)"
+                          ng-click="app.selectFolder(account, folder)"
+                          ng-dblclick="app.editFolder(folder)"
                           ui-sref="mail.account.mailbox({accountId: account.id, mailboxId: (folder.path | encodeUri)})"
                           ui-sref-active="sg-active">
-              <md-icon ng-class="'sg-child-level-' + folder.level">{{iconForFolder(folder)}}</md-icon>
+              <md-icon ng-class="'sg-child-level-' + folder.level">{{app.iconForFolder(folder)}}</md-icon>
               <p class="sg-item-name"
-                 ng-show="editMode != folder.path">{{folder.name}}</p>
+                 ng-show="app.editMode != folder.path">{{folder.name}}</p>
               <md-input-container class="md-flex md-tile-content"
-                                  ng-show="editMode == folder.path">
+                                  ng-show="app.editMode == folder.path">
                 <input class="folder-name" type="text"
                        label:aria-label="Enter the new name of your folder :"
                        ng-model="folder.name"
-                       ng-blur="saveFolder(folder)"
+                       ng-blur="app.saveFolder(folder)"
                        sg-focus-on="mailboxName_{{folder.path}}"
-                       sg-enter="saveFolder(folder)"
-                       sg-escape="revertEditing(folder)"/>
+                       sg-enter="app.saveFolder(folder)"
+                       sg-escape="app.revertEditing(folder)"/>
               </md-input-container>
               <md-menu class="md-secondary"
                        ng-click="true"
-                       ng-show="currentFolder.path == folder.path">
+                       ng-show="app.service.selectedFolder.path == folder.path">
                 <md-icon label:aria-label="Options"
                          ng-click="$mdOpenMenu()"
                          md-menu-origin="md-menu-origin">more_vert</md-icon>
@@ -285,7 +287,7 @@
                     </md-button>
                   </md-menu-item> -->
                   <md-menu-item>
-                    <md-button type="button" ng-click="newFolder(folder)">
+                    <md-button type="button" ng-click="app.newFolder(folder)">
                       <var:string label:value="New Subfolder..."/>
                     </md-button>
                   </md-menu-item>
@@ -295,12 +297,12 @@
                     </md-button>
                   </md-menu-item> -->
                   <md-menu-item>
-                    <md-button type="button" ng-click="confirmDelete(folder)">
+                    <md-button type="button" ng-click="app.confirmDelete(folder)">
                       <var:string label:value="Delete"/>
                     </md-button>
                   </md-menu-item>
                   <md-menu-item>
-                    <md-button type="button" ng-click="exportMails()">
+                    <md-button type="button" ng-click="app.exportMails(folder)">
                       <var:string label:value="Export"/>
                     </md-button>
                   </md-menu-item>
@@ -311,7 +313,7 @@
                     </md-button>
                   </md-menu-item> -->
                   <md-menu-item>
-                    <md-button type="button" ng-click="share(folder)">
+                    <md-button type="button" ng-click="app.share(folder)">
                       <var:string label:value="Sharing..."/>
                     </md-button>
                   </md-menu-item>
@@ -323,74 +325,77 @@
       </md-content>
     </md-sidenav>
 
-<!-- Main section -->
-    <section layout="column" class="sg-app-content md-layout-fill">
-      <md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main">
-        <div class="md-toolbar-tools md-toolbar-tools-top sg-padded" layout="row" layout-align="space-between start">
-          <var:component className="UIxTopnavToolbarTemplate" />
-          <div class="sg-toolbar-group-last">
-            <md-button class="sg-icon-button" label:aria-label="More">
-              <md-icon>more_vert</md-icon>
-            </md-button>
-          </div>
-        </div>
-        <div class="md-toolbar-tools md-toolbar-tools-bottom"
-             layout="row" layout-align="space-between center"
-             ng-show="mailbox.$selectedCount() == 0">
-          <div class="view-list cols-6 sg-padded" layout="row" layout-align="space-between center"
-               sg-search="mailbox.$filter({ sort: 'date', asc: false }, [{ searchBy: searchField, searchInput: searchText }])">
-            <md-input-container class="sg-search-field-container">
-              <label style="color: white"><md-icon>search</md-icon><var:string label:value="Search"/></label>
-              <input name="folderSearch" type="search" style="color: white"/>
-            </md-input-container>
+    <section layout="column" class="sg-app-content md-layout-fill" ui-view="mailbox"><!-- messages list --></section>
+  </script>
 
-            <div class="sg-toolbar-group">
-              <md-select class="sg-toolbar-sort md-contrast-light">
-                <md-option value="subject"><var:string label:value="Subject"/></md-option>
-                <md-option value="from"><var:string label:value="Sender"/></md-option>
-                <md-option value="subject_or_from"><var:string label:value="Subject or Sender"/></md-option>
-                <md-option value="to_or_cc"><var:string label:value="To or Cc"/></md-option>
-                <md-option value="body"><var:string label:value="Entire Message"/></md-option>
-              </md-select>
-            </div>
+  <script type="text/ng-template" id="UIxMailFolderTemplate">
+    <md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main">
+      <div class="md-toolbar-tools md-toolbar-tools-top sg-padded" layout="row" layout-align="space-between start">
+        <var:component className="UIxTopnavToolbarTemplate" />
+        <div class="sg-toolbar-group-last">
+          <md-button class="sg-icon-button" label:aria-label="More">
+            <md-icon>more_vert</md-icon>
+          </md-button>
+        </div>
+      </div>
+      <div class="md-toolbar-tools md-toolbar-tools-bottom"
+           layout="row" layout-align="space-between center"
+           ng-show="mailbox.selectedFolder.$selectedCount() == 0">
+        <div class="view-list cols-6 sg-padded" layout="row" layout-align="space-between center"
+             sg-search="mailbox.selectedFolder.$filter({ sort: 'date', asc: false }, [{ searchBy: searchField, searchInput: searchText }])">
+          <md-input-container class="sg-search-field-container">
+            <label style="color: white"><md-icon>search</md-icon><var:string label:value="Search"/></label>
+            <input name="folderSearch" type="search" style="color: white"/>
+          </md-input-container>
+
+          <div class="sg-toolbar-group">
+            <md-select class="sg-toolbar-sort md-contrast-light">
+              <md-option value="subject"><var:string label:value="Subject"/></md-option>
+              <md-option value="from"><var:string label:value="Sender"/></md-option>
+              <md-option value="subject_or_from"><var:string label:value="Subject or Sender"/></md-option>
+              <md-option value="to_or_cc"><var:string label:value="To or Cc"/></md-option>
+              <md-option value="body"><var:string label:value="Entire Message"/></md-option>
+            </md-select>
           </div>
         </div>
-        <div layout="row" layout-align="start center" ng-show="mailbox.$selectedCount() > 0">
-          <md-button class="sg-icon-button" ng-click="unselectMessages()">
-            <md-icon>arrow_back</md-icon>
+      </div>
+      <div layout="row" layout-align="start center" ng-show="mailbox.selectedFolder.$selectedCount() > 0">
+        <md-button class="sg-icon-button" ng-click="mailbox.unselectMessages()">
+          <md-icon>arrow_back</md-icon>
+        </md-button>
+        <label>{{mailbox.$selectedCount()}} selected</label>
+        <md-button class="sg-icon-button" ng-click="mailbox.confirmDeleteSelectedMessages()">
+          <md-icon>delete</md-icon>
+        </md-button>
+        <md-button class="sg-icon-button">
+          <md-icon>star</md-icon>
+        </md-button>
+        <md-menu>
+          <md-button class="sg-icon-button" label:aria-label="Copy messages" ng-click="$mdOpenMenu()">
+            <md-icon>content_copy</md-icon>
           </md-button>
-          <label>{{mailbox.$selectedCount()}} selected</label>
-          <md-button class="sg-icon-button" ng-click="confirmDeleteSelectedMessages()">
-            <md-icon>delete</md-icon>
-          </md-button>
-          <md-button class="sg-icon-button">
-            <md-icon>star</md-icon>
-          </md-button>
-          <md-menu>
-            <md-button class="sg-icon-button" label:aria-label="Copy messages" ng-click="$mdOpenMenu()">
-              <md-icon>content_copy</md-icon>
-            </md-button>
-            <md-menu-content width="4">
-              <div ng-repeat="account in accounts track by account.id">
-                <md-menu-item>
-                  <md-button class="md-primary" ng-disabled="true">{{account.name}}</md-button>
-                </md-menu-item>
-                <md-menu-divider><!-- divider --></md-menu-divider>
-                <md-menu-item ng-repeat="folder in
-                                         account.$flattenMailboxes()
-                                         track by folder.path"
-                              ng-hide="mailbox.id == folder.id">
-                  <md-button ng-click="copySelectedMessages(folder.id)">
-                    <span ng-class="'sg-child-level-' + folder.level">{{folder.name}}</span>
-                  </md-button>
-                </md-menu-item>
-              </div>
-            </md-menu-content>
-          </md-menu>
-        </div>
-      </md-toolbar>
-      <div layout="row" ui-view="mailbox"><!-- messages list --></div>
-    </section>
+          <md-menu-content width="4">
+            <div ng-repeat="account in mailbox.accounts track by account.id">
+              <md-menu-item>
+                <md-button class="md-primary" ng-disabled="true">{{account.name}}</md-button>
+              </md-menu-item>
+              <md-menu-divider><!-- divider --></md-menu-divider>
+              <md-menu-item ng-repeat="folder in
+                                       account.$flattenMailboxes()
+                                       track by folder.path"
+                            ng-hide="mailbox.id == folder.id">
+                <md-button ng-click="mailbox.copySelectedMessages(folder.id)">
+                  <span ng-class="'sg-child-level-' + folder.level">{{folder.name}}</span>
+                </md-button>
+              </md-menu-item>
+            </div>
+          </md-menu-content>
+        </md-menu>
+      </div>
+    </md-toolbar>
+    <div layout="row" class="md-flex">
+      <var:component className="UIxMailFolderTemplate" />
+    </div>
   </script>
 
   <!-- modal for mailbox sharing options -->
@@ -398,10 +403,6 @@
     <var:component className="UIxMailUserRightsEditor" />
   </script>
 
-  <script type="text/ng-template" id="UIxMailFolderTemplate">
-    <var:component className="UIxMailFolderTemplate" />
-  </script>
-
   <script type="text/ng-template" id="UIxMailViewTemplate">
     <var:component className="UIxMailViewTemplate" />
   </script>
diff --git a/UI/Templates/MailerUI/UIxMailViewTemplate.wox b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
index d343375b6..751d65a33 100644
--- a/UI/Templates/MailerUI/UIxMailViewTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
@@ -14,17 +14,17 @@
     <header class="msg-header">
       <div class="msg-header-content">
         <div layout="row" layout-align="start center">
-          <md-button class="sg-icon-button sg-msg-flag" label:aria-label="flagged" ng-click="message.toggleFlag()">
-            <md-icon ng-class="{'flagged': message.isflagged}">star</md-icon>
+          <md-button class="sg-icon-button sg-msg-flag" label:aria-label="flagged" ng-click="viewer.message.toggleFlag()">
+            <md-icon ng-class="{'flagged': viewer.message.isflagged}">star</md-icon>
           </md-button>
-          <h3 class="sg-md-title-msg" ng-bind="message.subject"><!-- subject --></h3>
+          <h3 class="sg-md-title-msg" ng-bind="viewer.message.subject"><!-- subject --></h3>
         </div>
         <div class="pseudo-input-container--compact">
           <label class="pseudo-input-label">
             <var:string label:value="From"/>
           </label>
           <div class="pseudo-input-field">
-            <a ng-href="mailto:{{message.from[0].email}}" ng-bind="message.from[0].full"><!-- from --></a>
+            <a ng-href="mailto:{{viewer.message.from[0].email}}" ng-bind="viewer.message.from[0].full"><!-- from --></a>
           </div>
         </div>
 
@@ -33,24 +33,19 @@
             <var:string label:value="To"/>
           </label>
           <div class="pseudo-input-field">
-            <a ng-href="mailto:{{message.to[0].email}}" ng-bind="message.to[0].full"><!-- to --></a>
+            <a ng-href="mailto:{{viewer.message.to[0].email}}" ng-bind="viewer.message.to[0].full"><!-- to --></a>
           </div>
         </div>
 
-        <md-chips ng-model="message.flags">
-          <md-chip-template>{{message.constructor.$tags[$chip][0]}}</md-chip-template>
-          <button md-chip-remove="md-chip-remove"
-                  class="md-chip-remove"
-                  ng-click="message.removeTag($chip)">
-            <md-icon>close</md-icon>
-          </button>
+        <md-chips ng-model="viewer.message.flags" ng-change="viewer.changeFlags()">
+          <md-chip-template>{{viewer.service.$tags[$chip][0]}}</md-chip-template>
           <md-autocomplete
-              md-selected-item="tags.selected"
-              md-selected-item-change="message.addTag(tag)"
-              md-search-text="tags.searchText"
-              md-items="tag in message.constructor.filterTags(tags.searchText)"
+              md-selected-item="viewer.tags.selected"
+              md-selected-item-change="viewer.message.addTag(viewer.tags.selected)"
+              md-search-text="viewer.tags.searchText"
+              md-items="tag in viewer.service.filterTags(viewer.tags.searchText)"
               label:placeholder="Add a tag">
-            <span md-highlight-text="tags.searchText">{{message.constructor.$tags[tag][0]}}</span>
+            <span md-highlight-text="viewer.tags.searchText">{{viewer.service.$tags[tag][0]}}</span>
           </md-autocomplete>
         </md-chips>
 
@@ -65,34 +60,34 @@
       <div class="sg-icon-bar--vertical">
       <!-- todo: Replace md-tooltip values by localizable string variable -->
       <md-button class="sg-icon-button"
-                 ng-hide="message.isDraft"
-                 ui-sref="mail.account.mailbox.message.action({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid, actionName: 'reply'})"
+                 ng-hide="viewer.message.isDraft"
+                 ui-sref="mail.account.mailbox.message.action({accountId: viewer.account.id, mailboxId: (viewer.mailbox.path | encodeUri), messageId: viewer.message.uid, actionName: 'reply'})"
                  aria-label="reply">
         <md-tooltip md-direction="left"><var:string label:value="Reply to Sender Only"/></md-tooltip>
         <md-icon>reply</md-icon>
       </md-button>
       <md-button class="sg-icon-button" aria-label="Reply All"
                  ng-hide="message.isDraft"
-                 ui-sref="mail.account.mailbox.message.action({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid, actionName: 'replyall'})">
+                 ui-sref="mail.account.mailbox.message.action({accountId: viewer.account.id, mailboxId: (viewer.mailbox.path | encodeUri), messageId: viewer.message.uid, actionName: 'replyall'})">
         <md-icon>reply_all</md-icon>
       </md-button>
       <md-button class="sg-icon-button" aria-label="Forward"
-                 ng-hide="message.isDraft"
-                 ui-sref="mail.account.mailbox.message.action({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid, actionName: 'forward'})">
+                 ng-hide="viewer.message.isDraft"
+                 ui-sref="mail.account.mailbox.message.action({accountId: viewer.account.id, mailboxId: (viewer.mailbox.path | encodeUri), messageId: viewer.message.uid, actionName: 'forward'})">
         <md-icon>forward</md-icon>
       </md-button>
       <md-button class="sg-icon-button" aria-label="Edit"
-                 ng-show="message.isDraft"
-                 ui-sref="mail.account.mailbox.message.edit({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid})">
+                 ng-show="viewer.message.isDraft"
+                 ui-sref="mail.account.mailbox.message.edit({accountId: viewer.account.id, mailboxId: (viewer.mailbox.path | encodeUri), messageId: viewer.message.uid})">
         <md-icon>create</md-icon>
       </md-button>
       <md-button class="sg-icon-button" aria-label="Delete"
-                 ng-click="doDelete(message)">
+                 ng-click="viewer.doDelete()">
         <md-icon>delete</md-icon>
       </md-button>
       <md-button class="sg-icon-button" aria-label="Load Images"
-                 ng-show="message.$hasUnsafeContent"
-                 ng-click="message.loadUnsafeContent()">
+                 ng-show="viewer.message.$hasUnsafeContent"
+                 ng-click="viewer.message.loadUnsafeContent()">
         <md-tooltip md-direction="left"><var:string label:value="Load Images"/></md-tooltip>
         <md-icon>image</md-icon>
       </md-button>
@@ -100,7 +95,7 @@
     </header>
     <md-divider><!-- divider --></md-divider>
 
-    <div ng-show="message.shouldAskReceipt == 1"
+    <div ng-show="viewer.message.shouldAskReceipt == 1"
          layout-padding="layout-padding">
       <md-whiteframe class="md-whiteframe-z2" layout="column"
                      layout-align="center start">
@@ -109,19 +104,19 @@
         <div class="md-actions" layout="row">
           <md-button label:aria-label="Yes"
                      type="button" class="md-primary"
-                     ng-click="message.$sendMDN()">Yes</md-button>
+                     ng-click="viewer.message.$sendMDN()">Yes</md-button>
           <md-button label:aria-label="No"
                      type="button"
-                     ng-click="message.shouldAskReceipt = 0">No</md-button>
+                     ng-click="viewer.message.shouldAskReceipt = 0">No</md-button>
         </div>
       </md-whiteframe>
     </div>
 
     <div class="msg-body">
       <div class="msg-date sg-md-body-multi">
-        <time datetime="message.date" ng-bind="message.date"><!-- date --></time>
+        <time datetime="viewer.message.date" ng-bind="viewer.message.date"><!-- date --></time>
       </div>
-      <div class="mailer_mailcontent" ng-repeat="part in message.$content()">
+      <div class="mailer_mailcontent" ng-repeat="part in viewer.message.$content()">
         <div ng-if="part.html" ng-bind-html="part.content"><!-- msg --></div>
         <div ng-if="part.compile" sg-compile="part.content"><!-- msg --></div>
       </div>
diff --git a/UI/WebServerResources/js/Mailer.app.js b/UI/WebServerResources/js/Mailer.app.js
index ca7fe7a93..889c59483 100644
--- a/UI/WebServerResources/js/Mailer.app.js
+++ b/UI/WebServerResources/js/Mailer.app.js
@@ -33,7 +33,8 @@
         views: {
           mailboxes: {
             templateUrl: 'UIxMailMainFrame', // UI/Templates/MailerUI/UIxMailMainFrame.wox
-            controller: 'MailboxesController'
+            controller: 'MailboxesController',
+            controllerAs: 'app'
           }
         },
         resolve: {
@@ -45,7 +46,7 @@
         abstract: true,
         views: {
           mailbox: {
-            template: '<ui-view/>',
+            template: '<ui-view/>'
           }
         },
         resolve: {
@@ -57,7 +58,8 @@
         views: {
           'mailbox@mail': {
             templateUrl: 'UIxMailFolderTemplate', // UI/Templates/MailerUI/UIxMailFolderTemplate.wox
-            controller: 'MailboxController'
+            controller: 'MailboxController',
+            controllerAs: 'mailbox'
           }
         },
         resolve: {
@@ -65,12 +67,26 @@
           stateMessages: stateMessages
         }
       })
+      .state('mail.account.mailbox.newMessage', {
+        url: '/new',
+        views: {
+          'mailbox@mail': {
+            templateUrl: 'UIxMailEditor', // UI/Templates/MailerUI/UIxMailEditor.wox
+            controller: 'MessageEditorController',
+            controllerAs: 'editor'
+          }
+        },
+        resolve: {
+          stateMessage: stateNewMessage
+        }
+      })
       .state('mail.account.mailbox.message', {
         url: '/:messageId',
         views: {
           message: {
             templateUrl: 'UIxMailViewTemplate', // UI/Templates/MailerUI/UIxMailViewTemplate.wox
-            controller: 'MessageController'
+            controller: 'MessageController',
+            controllerAs: 'viewer'
           }
         },
         resolve: {
@@ -82,7 +98,8 @@
         views: {
           'mailbox@mail': {
             templateUrl: 'UIxMailEditor', // UI/Templates/MailerUI/UIxMailEditor.wox
-            controller: 'MessageEditorController'
+            controller: 'MessageEditorController',
+            controllerAs: 'editor'
           }
         },
         resolve: {
@@ -94,25 +111,10 @@
         views: {
           'mailbox@mail': {
             templateUrl: 'UIxMailEditor', // UI/Templates/MailerUI/UIxMailEditor.wox
-            controller: 'MessageEditorController'
+            controller: 'MessageEditorController',
+            controllerAs: 'editor'
           }
         }
-      })
-      .state('mail.newMessage', {
-        url: '/new',
-        views: {
-          mailbox: {
-            templateUrl: 'UIxMailEditor', // UI/Templates/MailerUI/UIxMailEditor.wox
-            controller: 'MessageEditorController'
-          }
-        },
-        resolve: {
-          stateMessage: ['stateAccounts', function(stateAccounts) {
-            if (stateAccounts.length > 0) {
-              return stateAccounts[0].$newMessage();
-            }
-          }]
-        }
       });
 
     // if none of the above states are matched, use this as the fallback
@@ -131,8 +133,8 @@
    */
   stateAccounts.$inject = ['$q', 'Account'];
   function stateAccounts($q, Account) {
-    var accounts = Account.$findAll(mailAccounts);
-    var promises = [];
+    var accounts = Account.$findAll(mailAccounts),
+        promises = [];
     // Fetch list of mailboxes for each account
     angular.forEach(accounts, function(account, i) {
       var mailboxes = account.$getMailboxes();
@@ -158,9 +160,10 @@
    */
   stateMailbox.$inject = ['$stateParams', 'stateAccount', 'decodeUriFilter'];
   function stateMailbox($stateParams, stateAccount, decodeUriFilter) {
-    var mailboxId = decodeUriFilter($stateParams.mailboxId);
+    var mailboxId = decodeUriFilter($stateParams.mailboxId),
+        _find;
     // Recursive find function
-    var _find = function(mailboxes) {
+    _find = function(mailboxes) {
       var mailbox = _.find(mailboxes, function(o) {
         return o.path == mailboxId;
       });
@@ -184,6 +187,14 @@
     return stateMailbox.$filter();
   }
 
+  /**
+   * @ngInject
+   */
+  stateNewMessage.$inject = ['stateAccount'];
+  function stateNewMessage(stateAccount) {
+    return stateAccount.$newMessage();
+  }
+
   /**
    * @ngInject
    */
@@ -197,7 +208,7 @@
       return message.$reload();
     else
       // Message not found
-      $state.go('mail.account.mailbox', { accountId: stateMailbox.$account.id, mailboxId: encodeUriFilter(stateMailbox.path) }  );
+      $state.go('mail.account.mailbox', { accountId: stateMailbox.$account.id, mailboxId: encodeUriFilter(stateMailbox.path) });
   }
 
   /**
diff --git a/UI/WebServerResources/js/Mailer/Account.service.js b/UI/WebServerResources/js/Mailer/Account.service.js
index 514129290..28d4dc4f9 100644
--- a/UI/WebServerResources/js/Mailer/Account.service.js
+++ b/UI/WebServerResources/js/Mailer/Account.service.js
@@ -197,27 +197,21 @@
    * @returns a promise of the HTTP operations
    */
   Account.prototype.$newMessage = function() {
-    var _this = this,
-        deferred = Account.$q.defer(),
-        message;
+    var _this = this;
 
     // Query account for draft folder and draft UID
-    Account.$$resource.fetch(this.id.toString(), 'compose').then(function(data) {
+    return Account.$$resource.fetch(this.id.toString(), 'compose').then(function(data) {
       Account.$log.debug('New message: ' + JSON.stringify(data, undefined, 2));
-      message = new Account.$Message(data.accountId, _this.$getMailboxByPath(data.mailboxPath), data);
+      var message = new Account.$Message(data.accountId, _this.$getMailboxByPath(data.mailboxPath), data);
+      return message;
+    }).then(function(message) {
       // Fetch draft initial data
-      Account.$$resource.fetch(message.$absolutePath({asDraft: true}), 'edit').then(function(data) {
+      return Account.$$resource.fetch(message.$absolutePath({asDraft: true}), 'edit').then(function(data) {
         Account.$log.debug('New message: ' + JSON.stringify(data, undefined, 2));
         angular.extend(message.editable, data);
-        deferred.resolve(message);
-      }, function(data) {
-        deferred.reject(data);
+        return message;
       });
-    }, function(data) {
-      deferred.reject(data);
     });
-
-    return deferred.promise;
   };
 
   /**
diff --git a/UI/WebServerResources/js/Mailer/Mailbox.service.js b/UI/WebServerResources/js/Mailer/Mailbox.service.js
index 4ab39cf5d..d802f3107 100644
--- a/UI/WebServerResources/js/Mailer/Mailbox.service.js
+++ b/UI/WebServerResources/js/Mailer/Mailbox.service.js
@@ -47,6 +47,7 @@
       $$resource: new Resource(Settings.activeUser.folderURL + 'Mail', Settings.activeUser),
       $Message: Message,
       $$Acl: Acl,
+      selectedFolder: null,
       PRELOAD: PRELOAD
     });
 
diff --git a/UI/WebServerResources/js/Mailer/MailboxController.js b/UI/WebServerResources/js/Mailer/MailboxController.js
index 990c7b47c..fa44edf75 100644
--- a/UI/WebServerResources/js/Mailer/MailboxController.js
+++ b/UI/WebServerResources/js/Mailer/MailboxController.js
@@ -6,16 +6,62 @@
   /**
    * @ngInject
    */
-  MailboxController.$inject = ['$scope', '$rootScope', '$state', '$stateParams', 'stateAccount', 'stateMailbox', '$timeout', 'encodeUriFilter', 'sgFocus', 'Dialog', 'Account', 'Mailbox'];
-  function MailboxController($scope, $rootScope, $state, $stateParams, stateAccount, stateMailbox, $timeout, encodeUriFilter, focus, Dialog, Account, Mailbox) {
-    $scope.account = stateAccount;
-    $rootScope.mailbox = stateMailbox;
-    $rootScope.currentFolder = stateMailbox;
-    
-    $scope.selectMessage = function(message) {
-      $state.go('mail.account.mailbox.message', {accountId: stateAccount.id, mailboxId: encodeUriFilter(stateMailbox.path), messageId: message.uid});
-    };
+  MailboxController.$inject = ['$state', 'stateAccounts', 'stateAccount', 'stateMailbox', 'encodeUriFilter', 'sgFocus', 'Dialog', 'Account', 'Mailbox'];
+  function MailboxController($state, stateAccounts, stateAccount, stateMailbox, encodeUriFilter, focus, Dialog, Account, Mailbox) {
+    var vm = this;
 
+    Mailbox.selectedFolder = stateMailbox;
+
+    vm.accounts = stateAccounts;
+    vm.account = stateAccount;
+    vm.selectedFolder = stateMailbox;
+    vm.selectMessage = selectMessage;
+    vm.unselectMessages = unselectMessages;
+    vm.confirmDeleteSelectedMessages = confirmDeleteSelectedMessages;
+    vm.copySelectedMessages = copySelectedMessages;
+    // vm.moveSelectedMessages = moveSelectedMessages;
+    
+    function selectMessage(message) {
+      $state.go('mail.account.mailbox.message', {accountId: stateAccount.id, mailboxId: encodeUriFilter(stateMailbox.path), messageId: message.uid});
+    }
+
+    function unselectMessages() {
+      _.each(vm.selectedFolder.$messages, function(message) { message.selected = false; });
+    }
+
+    function confirmDeleteSelectedMessages() {
+      Dialog.confirm(l('Warning'),
+                     l('Are you sure you want to delete the selected messages?'))
+        .then(function() {
+          // User confirmed the deletion
+          var selectedMessages = _.filter(vm.selectedFolder.$messages, function(message) { return message.selected });
+          var selectedUIDs = _.pluck(selectedMessages, 'uid');
+          vm.selectedFolder.$deleteMessages(selectedUIDs).then(function() {
+            vm.selectedFolder.$messages = _.difference(vm.selectedFolder.$messages, selectedMessages);
+          });
+        },  function(data, status) {
+          // Delete failed
+        });
+    }
+
+    function copySelectedMessages(folder) {
+      var selectedMessages = _.filter(vm.selectedFolder.$messages, function(message) { return message.selected });
+      var selectedUIDs = _.pluck(selectedMessages, 'uid');
+      vm.selectedFolder.$copyMessages(selectedUIDs, '/' + folder).then(function() {
+        // TODO: refresh target mailbox?
+      }, function(error) {
+        Dialog.alert(l('Error'), error.error);
+      });
+    }
+
+    // function moveSelectedMessages(folder) {
+    //   var selectedMessages = _.filter(vm.selectedFolder.$messages, function(message) { return message.selected });
+    //   var selectedUIDs = _.pluck(selectedMessages, 'uid');
+    //   vm.selectedFolder.$moveMessages(selectedUIDs, '/' + folder).then(function() {
+    //     // TODO: refresh target mailbox?
+    //     vm.selectedFolder.$messages = _.difference(vm.selectedFolder.$messages, selectedMessages);
+    //   });
+    // }
   }
 
   angular
diff --git a/UI/WebServerResources/js/Mailer/MailboxesController.js b/UI/WebServerResources/js/Mailer/MailboxesController.js
index 20e7def98..985d7055b 100644
--- a/UI/WebServerResources/js/Mailer/MailboxesController.js
+++ b/UI/WebServerResources/js/Mailer/MailboxesController.js
@@ -8,10 +8,31 @@
    */
   MailboxesController.$inject = ['$scope', '$rootScope', '$stateParams', '$state', '$timeout', '$mdDialog', 'sgFocus', 'encodeUriFilter', 'Dialog', 'sgSettings', 'Account', 'Mailbox', 'User', 'stateAccounts'];
   function MailboxesController($scope, $rootScope, $stateParams, $state, $timeout, $mdDialog, focus, encodeUriFilter, Dialog, Settings, Account, Mailbox, User, stateAccounts) {
-    $scope.activeUser = Settings.activeUser;
-    $scope.accounts = stateAccounts;
+    var vm = this,
+        account,
+        mailbox;
 
-    $scope.newFolder = function(parentFolder) {
+    vm.service = Mailbox;
+    vm.accounts = stateAccounts;
+    vm.newFolder = newFolder;
+    vm.delegate = delegate;
+    vm.editFolder = editFolder;
+    vm.revertEditing = revertEditing;
+    vm.selectFolder = selectFolder;
+    vm.saveFolder = saveFolder;
+    vm.exportMails = exportMails;
+    vm.confirmDelete = confirmDelete;
+    vm.share = share;
+    vm.iconForFolder = iconForFolder;
+
+    if ($state.current.name == 'mail' && vm.accounts.length > 0 && vm.accounts[0].$mailboxes.length > 0) {
+      // Redirect to first mailbox of first account if no mailbox is selected
+      account = vm.accounts[0];
+      mailbox = account.$mailboxes[0];
+      $state.go('mail.account.mailbox', { accountId: account.id, mailboxId: encodeUriFilter(mailbox.path) });
+    }
+
+    function newFolder(parentFolder) {
       Dialog.prompt(l('New folder'),
                     l('Enter the new name of your folder :'))
         .then(function(name) {
@@ -23,8 +44,9 @@
                            l(data.error));
             });
         });
-    };
-    $scope.delegate = function(account) {
+    }
+
+    function delegate(account) {
       $mdDialog.show({
         templateUrl: account.id + '/delegation', // UI/Templates/MailerUI/UIxMailUserDelegation.wox
         controller: MailboxDelegationController,
@@ -56,7 +78,6 @@
         vm.selectUser = selectUser;
 
         function userFilter($query) {
-          //return User.$filter($query, folder.$acl.users);
           return User.$filter($query, account.delegates);
         }
 
@@ -70,7 +91,7 @@
               vm.selectedUser = null;
             }
           }, function(data, status) {
-            Dialog.alert(l('Warning'), l('An error occured please try again.'))
+            Dialog.alert(l('Warning'), l('An error occured please try again.'));
           });
         }
 
@@ -92,48 +113,47 @@
           }
         }
       }
-    };
-    $scope.editFolder = function(folder) {
-      $scope.editMode = folder.path;
+    } // delegate
+
+    function editFolder(folder) {
+      vm.editMode = folder.path;
       focus('mailboxName_' + folder.path);
-    };
-    $scope.revertEditing = function(folder) {
+    }
+
+    function revertEditing(folder) {
       folder.$reset();
-      $scope.editMode = false;
-    };
-    $scope.selectFolder = function(account, folder) {
-      if ($scope.editMode == folder.path)
+      vm.editMode = false;
+    }
+
+    function selectFolder(account, folder) {
+      if (vm.editMode == folder.path)
         return;
-      $rootScope.currentFolder = folder;
-      $scope.editMode = false;
-      $rootScope.message = null;
+      vm.editMode = false;
       $state.go('mail.account.mailbox', { accountId: account.id, mailboxId: encodeUriFilter(folder.path) });
-    };
-    $scope.saveFolder = function(folder) {
+    }
+
+    function saveFolder(folder) {
       folder.$rename();
-    };
-    $scope.exportMails = function() {
-      window.location.href = ApplicationBaseURL + '/' + $rootScope.currentFolder.id + '/exportFolder';
-    };
-    $scope.confirmDelete = function(folder) {
-      if (folder.path != $scope.currentFolder.path) {
-        // Counter the possibility to click on the "hidden" secondary button
-        $scope.selectFolder(folder.$account, folder);
-        return;
-      }
+    }
+
+    function exportMails(folder) {
+      window.location.href = ApplicationBaseURL + '/' + folder.id + '/exportFolder';
+    }
+
+    function confirmDelete(folder) {
       Dialog.confirm(l('Confirmation'), l('Do you really want to move this folder into the trash ?'))
         .then(function() {
           folder.$delete()
             .then(function() {
-              $rootScope.currentFolder = null;
               $state.go('mail');
             }, function(data, status) {
               Dialog.alert(l('An error occured while deleting the mailbox "%{0}".', folder.name),
                            l(data.error));
             });
         });
-    };
-    $scope.share = function(folder) {
+    }
+
+    function share(folder) {
       //if (addressbook.id != vm.service.selectedFolder.id) {
       // Counter the possibility to click on the "hidden" secondary button
       //select(addressbook);
@@ -208,7 +228,7 @@
               vm.selectedUser = null;
             }
           }, function(data, status) {
-            Dialog.alert(l('Warning'), l('An error occured please try again.'))
+            Dialog.alert(l('Warning'), l('An error occured please try again.'));
           });
         }
 
@@ -231,9 +251,9 @@
           }
         }
       }
-    };
+    } // share
 
-    $scope.iconForFolder = function(folder) {
+    function iconForFolder(folder) {
       if (folder.type == 'inbox')
         return 'inbox';
       else if (folder.type == 'draft')
@@ -247,51 +267,6 @@
       //  return 'folder_open';
 
       return 'folder';
-    };
-
-    $scope.unselectMessages = function() {
-      _.each($rootScope.mailbox.$messages, function(message) { message.selected = false; });
-    };
-
-    $scope.confirmDeleteSelectedMessages = function() {
-      Dialog.confirm(l('Warning'),
-                     l('Are you sure you want to delete the selected messages?'))
-        .then(function() {
-          // User confirmed the deletion
-          var selectedMessages = _.filter($rootScope.mailbox.$messages, function(message) { return message.selected });
-          var selectedUIDs = _.pluck(selectedMessages, 'uid');
-          $rootScope.mailbox.$deleteMessages(selectedUIDs).then(function() {
-            $rootScope.mailbox.$messages = _.difference($rootScope.mailbox.$messages, selectedMessages);
-          });
-        },  function(data, status) {
-          // Delete failed
-        });
-    };
-
-    $scope.copySelectedMessages = function(folder) {
-      var selectedMessages = _.filter($rootScope.mailbox.$messages, function(message) { return message.selected });
-      var selectedUIDs = _.pluck(selectedMessages, 'uid');
-      $rootScope.mailbox.$copyMessages(selectedUIDs, '/' + folder).then(function() {
-        // TODO: refresh target mailbox?
-      }, function(error) {
-        Dialog.alert(l('Error'), error.error);
-      });
-    };
-
-    // $scope.moveSelectedMessages = function(folder) {
-    //   var selectedMessages = _.filter($rootScope.mailbox.$messages, function(message) { return message.selected });
-    //   var selectedUIDs = _.pluck(selectedMessages, 'uid');
-    //   $rootScope.mailbox.$moveMessages(selectedUIDs, '/' + folder).then(function() {
-    //     // TODO: refresh target mailbox?
-    //     $rootScope.mailbox.$messages = _.difference($rootScope.mailbox.$messages, selectedMessages);
-    //   });
-    // };
-
-    if ($state.current.name == 'mail' && $scope.accounts.length > 0 && $scope.accounts[0].$mailboxes.length > 0) {
-      // Redirect to first mailbox of first account if no mailbox is selected
-      var account = $scope.accounts[0];
-      var mailbox = account.$mailboxes[0];
-      $state.go('mail.account.mailbox', { accountId: account.id, mailboxId: encodeUriFilter(mailbox.path) });
     }
   }
 
diff --git a/UI/WebServerResources/js/Mailer/Message.service.js b/UI/WebServerResources/js/Mailer/Message.service.js
index 4e484aedc..ddbba5ba8 100644
--- a/UI/WebServerResources/js/Mailer/Message.service.js
+++ b/UI/WebServerResources/js/Mailer/Message.service.js
@@ -105,8 +105,7 @@
     if (oldUID != uid) {
       this.uid = uid;
       this.id = this.$absolutePath();
-      if (oldUID > -1) {
-        // For new messages, $mailbox doesn't exist
+      if (oldUID > -1 && this.$mailbox.uidsMap[oldUID]) {
         this.$mailbox.uidsMap[uid] = this.$mailbox.uidsMap[oldUID];
         this.$mailbox.uidsMap[oldUID] = null;
       }
@@ -417,29 +416,21 @@
    * @returns a promise of the HTTP operations
    */
   Message.prototype.$newDraft = function(action) {
-    var _this = this,
-        deferred = Message.$q.defer(),
-        mailbox,
-        message;
+    var _this = this;
 
     // Query server for draft folder and draft UID
-    Message.$$resource.fetch(this.id, action).then(function(data) {
+    return Message.$$resource.fetch(this.id, action).then(function(data) {
+      var mailbox, message;
       Message.$log.debug('New ' + action + ': ' + JSON.stringify(data, undefined, 2));
       mailbox = _this.$mailbox.$account.$getMailboxByPath(data.mailboxPath);
       message = new Message(data.accountId, mailbox, data);
       // Fetch draft initial data
-      Message.$$resource.fetch(message.$absolutePath({asDraft: true}), 'edit').then(function(data) {
+      return Message.$$resource.fetch(message.$absolutePath({asDraft: true}), 'edit').then(function(data) {
         Message.$log.debug('New ' + action + ': ' + JSON.stringify(data, undefined, 2));
         angular.extend(message.editable, data);
-        deferred.resolve(message);
-      }, function(data) {
-        deferred.reject(data);
+        return message;
       });
-    }, function(data) {
-      deferred.reject(data);
     });
-
-    return deferred.promise;
   };
 
   /**
diff --git a/UI/WebServerResources/js/Mailer/MessageController.js b/UI/WebServerResources/js/Mailer/MessageController.js
index bbdee133e..c72e45db2 100644
--- a/UI/WebServerResources/js/Mailer/MessageController.js
+++ b/UI/WebServerResources/js/Mailer/MessageController.js
@@ -6,21 +6,39 @@
   /**
    * @ngInject
    */
-  MessageController.$inject = ['$scope', '$rootScope', '$stateParams', '$state', 'stateAccount', 'stateMailbox', 'stateMessage', '$timeout', 'encodeUriFilter', 'sgFocus', 'Dialog', 'Account', 'Mailbox'];
-  function MessageController($scope, $rootScope, $stateParams, $state, stateAccount, stateMailbox, stateMessage, $timeout, encodeUriFilter, focus, Dialog, Account, Mailbox) {
-    $rootScope.message = stateMessage;
-    $scope.tags = {};
-    $scope.doDelete = function() {
+  MessageController.$inject = ['$scope', '$state', 'stateAccount', 'stateMailbox', 'stateMessage', 'encodeUriFilter', 'sgFocus', 'Dialog', 'Account', 'Mailbox', 'Message'];
+  function MessageController($scope, $state, stateAccount, stateMailbox, stateMessage, encodeUriFilter, focus, Dialog, Account, Mailbox, Message) {
+    var vm = this;
+
+    vm.account = stateAccount;
+    vm.mailbox = stateMailbox;
+    vm.message = stateMessage;
+    vm.service = Message;
+    vm.tags = { searchText: '', selected: '' };
+    vm.doDelete = doDelete;
+
+    // Watch the message model "flags" attribute to remove on-the-fly a tag from the IMAP message
+    // when removed from the message viewer.
+    // TODO: this approach should be reviewed once md-chips supports ng-change.
+    $scope.$watchCollection('viewer.message.flags', function(oldTags, newTags) {
+      _.each(_.difference(newTags, oldTags), function(tag) {
+        vm.message.removeTag(tag);
+      });
+    });
+
+    function doDelete() {
       stateMailbox.$deleteMessages([stateMessage.uid]).then(function() {
         // Remove message from list of messages
-        stateMailbox.$messages = _.reject(stateMailbox.$messages, function(o) {
+        var index = _.findIndex(stateMailbox.$messages, function(o) {
           return o.uid == stateMessage.uid;
         });
+        if (index != -1)
+          stateMailbox.$messages.splice(index, 1);
         // Remove message object from scope
-        $rootScope.message = null;
+        vm.message = null;
         $state.go('mail.account.mailbox', { accountId: stateAccount.id, mailboxId: encodeUriFilter(stateMailbox.path) });
       });
-    };
+    }
   }
   
   angular
diff --git a/UI/WebServerResources/js/Mailer/MessageEditorController.js b/UI/WebServerResources/js/Mailer/MessageEditorController.js
index c6fd3aea1..ce339e0f5 100644
--- a/UI/WebServerResources/js/Mailer/MessageEditorController.js
+++ b/UI/WebServerResources/js/Mailer/MessageEditorController.js
@@ -6,60 +6,18 @@
   /**
    * @ngInject
    */
-  MessageEditorController.$inject = ['$scope', '$rootScope', '$stateParams', '$state', '$q', 'FileUploader', 'stateAccounts', 'stateMessage', '$timeout', 'encodeUriFilter', 'sgFocus', 'Dialog', 'Account', 'Mailbox', 'AddressBook'];
-  function MessageEditorController($scope, $rootScope, $stateParams, $state, $q, FileUploader, stateAccounts, stateMessage, $timeout, encodeUriFilter, focus, Dialog, Account, Mailbox, AddressBook) {
-    $scope.autocomplete = {to: {}, cc: {}, bcc: {}};
-    $scope.hideCc = true;
-    $scope.hideBcc = true;
-    if ($stateParams.actionName == 'reply') {
-      stateMessage.$reply().then(function(msgObject) {
-        console.debug("foo");
+  MessageEditorController.$inject = ['$stateParams', '$state', '$q', 'FileUploader', 'stateAccounts', 'stateMessage', '$timeout', 'encodeUriFilter', 'sgFocus', 'Dialog', 'Account', 'Mailbox', 'AddressBook'];
+  function MessageEditorController($stateParams, $state, $q, FileUploader, stateAccounts, stateMessage, $timeout, encodeUriFilter, focus, Dialog, Account, Mailbox, AddressBook) {
+    var vm = this;
 
-        $scope.message = msgObject;
-        $scope.hideCc = (!msgObject.editable.cc || msgObject.editable.cc.length == 0);
-        $scope.hideBcc = (!msgObject.editable.bcc || msgObject.editable.bcc.length == 0);
-      });
-    }
-    else if ($stateParams.actionName == 'replyall') {
-      stateMessage.$replyAll().then(function(msgObject) {
-        $scope.message = msgObject;
-        $scope.hideCc = (!msgObject.editable.cc || msgObject.editable.cc.length == 0);
-        $scope.hideBcc = (!msgObject.editable.bcc || msgObject.editable.bcc.length == 0);
-      });
-    }
-    else if ($stateParams.actionName == 'forward') {
-      stateMessage.$forward().then(function(msgObject) {
-        $scope.message = msgObject;
-        $scope.hideCc = true;
-        $scope.hideBcc = true;
-      });
-    }
-    else if (angular.isDefined(stateMessage)) {
-      $scope.message = stateMessage;
-    }
-    $scope.identities = _.pluck(_.flatten(_.pluck(stateAccounts, 'identities')), 'full');
-    $scope.cancel = function() {
-      if ($scope.mailbox)
-        $state.go('mail.account.mailbox', { accountId: $scope.mailbox.$account.id, mailboxId: encodeUriFilter($scope.mailbox.path) });
-      else
-        $state.go('mail');
-    };
-    $scope.send = function(message) {
-      message.$send().then(function(data) {
-        $rootScope.message = null;
-        $state.go('mail');
-      }, function(data) {
-        console.debug('failure ' + JSON.stringify(data, undefined, 2));
-      });
-    };
-    $scope.userFilter = function($query) {
-      var deferred = $q.defer();
-      AddressBook.$filterAll($query).then(function(results) {
-        deferred.resolve(_.invoke(results, '$shortFormat', $query));
-      });
-      return deferred.promise;
-    };
-    $scope.uploader = new FileUploader({
+    vm.autocomplete = {to: {}, cc: {}, bcc: {}};
+    vm.hideCc = true;
+    vm.hideBcc = true;
+    vm.cancel = cancel;
+    vm.send = send;
+    vm.userFilter = userFilter;
+    vm.identities = _.pluck(_.flatten(_.pluck(stateAccounts, 'identities')), 'full');
+    vm.uploader = new FileUploader({
       url: stateMessage.$absolutePath({asDraft: true}) + '/save',
       autoUpload: true,
       alias: 'attachments',
@@ -82,6 +40,53 @@
         console.debug(item); console.debug('error = ' + JSON.stringify(response, undefined, 2));
       }
     });
+
+    if ($stateParams.actionName == 'reply') {
+      stateMessage.$reply().then(function(msgObject) {
+        vm.message = msgObject;
+        vm.hideCc = (!msgObject.editable.cc || msgObject.editable.cc.length == 0);
+        vm.hideBcc = (!msgObject.editable.bcc || msgObject.editable.bcc.length == 0);
+      });
+    }
+    else if ($stateParams.actionName == 'replyall') {
+      stateMessage.$replyAll().then(function(msgObject) {
+        vm.message = msgObject;
+        vm.hideCc = (!msgObject.editable.cc || msgObject.editable.cc.length == 0);
+        vm.hideBcc = (!msgObject.editable.bcc || msgObject.editable.bcc.length == 0);
+      });
+    }
+    else if ($stateParams.actionName == 'forward') {
+      stateMessage.$forward().then(function(msgObject) {
+        vm.message = msgObject;
+      });
+    }
+    else if (angular.isDefined(stateMessage)) {
+      vm.message = stateMessage;
+    }
+
+    function cancel() {
+      // TODO: delete draft?
+      if ($state.params.mailboxId)
+        $state.go('mail.account.mailbox', { accountId: $state.params.accountId, mailboxId: $state.params.mailboxId });
+      else
+        $state.go('mail');
+    }
+
+    function send() {
+      vm.message.$send().then(function(data) {
+        $state.go('mail');
+      }, function(data) {
+        console.debug('failure ' + JSON.stringify(data, undefined, 2));
+      });
+    }
+
+    function userFilter($query) {
+      var deferred = $q.defer();
+      AddressBook.$filterAll($query).then(function(results) {
+        deferred.resolve(_.invoke(results, '$shortFormat', $query));
+      });
+      return deferred.promise;
+    }
   }
 
   angular