From 04b992e1f130f8f9cc7bd61830fe4cbfa2c827de Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Thu, 28 May 2015 13:48:45 -0400
Subject: [PATCH] (js) Make use of 'controllerAs' in Contacts module

---
 .../ContactsUI/UIxContactEditorTemplate.wox   | 128 +++++-----
 .../ContactsUI/UIxContactFoldersView.wox      |  99 ++++----
 .../ContactsUI/UIxContactViewTemplate.wox     |  60 ++---
 UI/WebServerResources/js/Contacts.app.js      |  15 +-
 .../js/Contacts/AddressBook.service.js        | 163 ++++++++-----
 .../js/Contacts/AddressBookController.js      |  40 +--
 .../js/Contacts/AddressBooksController.js     | 227 +++++++++++-------
 .../js/Contacts/CardController.js             | 103 ++++----
 8 files changed, 473 insertions(+), 362 deletions(-)

diff --git a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
index 0a2381de8..39a10743a 100644
--- a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
@@ -5,73 +5,73 @@
     <md-content md-scroll-y="true" class="md-padding md-whiteframe-z1 bg-sogoPaper-50">
       <div class="editor md-padding">
         <hgroup class="header">
-          <h1 class="sg-md-display-2--light" ng-bind-html="card.$fullname()"><!-- fullname --></h1>
-          <h6 class="sg-md-display-2-subheader">{{card.$description()}}</h6>
+          <h1 class="sg-md-display-2--light" ng-bind-html="editor.card.$fullname()"><!-- fullname --></h1>
+          <h6 class="sg-md-display-2-subheader">{{editor.card.$description()}}</h6>
         </hgroup>
         
         <!-- contact editor -->
-        <form name="cardForm" ng-show="card.$isCard()" ng-submit="save(cardForm)">
+        <form name="cardForm" ng-show="editor.card.$isCard()" ng-submit="editor.save(cardForm)">
           <md-input-container>
             <var:entity const:name="nbsp"/>
-            <label class="pseudo-input-label">
+            <label>
               <var:string label:value="Display"/>
             </label>
-            <input type="text" ng-maxlength="30" ng-model="card.fn"/>
+            <input type="text" ng-maxlength="30" ng-model="editor.card.fn"/>
           </md-input-container>
           <!-- todo: look for better reset/normalization. Semanticaly this should be a fieldset, but content doesn't flex properly du to browser styles-->
           <div id="contact-identification" class="sg-fieldset" layout="row" layout-sm="column">
             <md-input-container flex="40">
-              <label class="pseudo-input-label">
+              <label>
                 <var:string label:value="Firstname"/>
               </label>
-              <input type="text" ng-model="card.givenname"/>
+              <input type="text" ng-model="editor.card.givenname"/>
             </md-input-container>
             <md-input-container flex="40">
-              <label class="pseudo-input-label">
+              <label>
                 <var:string label:value="Lastname"/>
               </label>
-              <input type="text" ng-model="card.sn"/>
+              <input type="text" ng-model="editor.card.sn"/>
             </md-input-container>
             <md-input-container flex="20">
-              <label class="pseudo-input-label">
+              <label>
                 <var:string label:value="Nickname"/>
               </label>
-              <input type="text" ng-model="card.nickname"/>
+              <input type="text" ng-model="editor.card.nickname"/>
             </md-input-container>
           </div>
 
           <div class="sg-fieldset" layout="row" layout-sm="column">
             <md-input-container>
-              <label class="pseudo-input-label">
+              <label>
                 <var:string label:value="Organization"/>
               </label>
-              <input type="text" ng-model="card.org"/>
+              <input type="text" ng-model="editor.card.org"/>
             </md-input-container>
             <md-input-container>
-              <label class="pseudo-input-label">
+              <label>
                 <var:string label:value="Title"/>
               </label>
-              <input type="text" ng-model="card.title"/>
+              <input type="text" ng-model="editor.card.title"/>
             </md-input-container>
           </div>
 
           <!-- org units -->
-          <div class="attr" ng-repeat="unit in card.orgUnits">
+          <div class="attr" ng-repeat="unit in editor.card.orgUnits">
             <div layout="row" layout-align="center end">
               <md-input-container>
-                <label class="pseudo-input-label">
+                <label>
                   <var:string label:value="Organization Unit"/>
                 </label>
                 <input type="text" ng-model="unit.value"
                        sg-focus-on="orgUnit_{{$index}}"/>
               </md-input-container>
-              <md-button class="iconButton" ng-click="card.$delete('orgUnits', $index)">
+              <md-button class="iconButton" type="button" ng-click="editor.card.$delete('orgUnits', $index)">
                 <i class="md-icon-remove-circle"><!-- remove --></i>
               </md-button>
             </div>
           </div>
           <div class="md-layout-margin" layout="row" layout-align="start center">
-            <md-button class="iconButton" type="button" ng-click="addOrgUnit($event)">
+            <md-button class="iconButton" type="button" ng-click="editor.addOrgUnit($event)">
               <i class="md-icon-add"><!-- plus icon button--></i>
             </md-button>
             <label class="button-label">
@@ -81,26 +81,26 @@
 
           <!-- emails -->
           <div class="section">
-            <div class="attr" ng-repeat="email in card.emails">
+            <div class="attr" ng-repeat="email in editor.card.emails">
               <div class="md-layout-margin" layout="row" layout-align="space-between end">
                 <md-select ng-model="email.type" label:placeholder="Type">
-                  <md-option ng-repeat="type in ::allEmailTypes" ng-value="type">{{ type }}</md-option>
+                  <md-option ng-repeat="type in ::editor.allEmailTypes" ng-value="type">{{ type }}</md-option>
                 </md-select>
                 <md-input-container>
-                  <label class="pseudo-input-label">
+                  <label>
                     <var:string label:value="Email Address"/>
                   </label>
                   <input type="email" ng-model="email.value"
                          sg-focus-on="email_{{$index}}"/>
                 </md-input-container>
-                <md-button class="iconButton" ng-click="card.$delete('emails', $index)">
+                <md-button class="iconButton" type="button" ng-click="editor.card.$delete('emails', $index)">
                   <i class="md-icon-remove-circle"><!-- remove --></i>
                 </md-button>
               </div>
 
             </div>
             <div class="md-layout-margin" layout="row" layout-align="start center">
-              <md-button class="iconButton" type="button" ng-click="addEmail()">
+              <md-button class="iconButton" type="button" ng-click="editor.addEmail()">
                 <i class="md-icon-add"><!-- new --></i>
               </md-button>
               <label class="button-label">
@@ -111,51 +111,49 @@
 
           <!-- birthday -->
           <md-input-container>
-            <label class="pseudo-input-label--no-margin">
+            <label>
               <var:string label:value="Birthday"/>
             </label>
-            <input type="date" ng-model="card.birthday"/>
+            <input type="date" ng-model="editor.card.birthday"/>
           </md-input-container>
 
           <!-- categories -->
-          <div class="pseudo-input-container">
-            <md-chips ng-model="card.categories">
+            <md-chips ng-model="editor.card.categories">
               <md-chip-template>
                 {{$chip.value}}
               </md-chip-template>
               <md-autocomplete
-                  md-selected-item="categories.selected"
-                  md-selected-item-change="card.$addCategory(category)"
-                  md-search-text="categories.searchText"
-                  md-items="category in card.constructor.filterCategories(categories.searchText)"
+                  md-selected-item="editor.categories.selected"
+                  md-selected-item-change="editor.card.$addCategory(category)"
+                  md-search-text="editor.categories.searchText"
+                  md-items="category in editor.card.constructor.filterCategories(editor.categories.searchText)"
                   label:placeholder="Add a category">
-                <span md-highlight-text="categories.searchText">{{category}}</span>
+                <span md-highlight-text="editor.categories.searchText">{{category}}</span>
               </md-autocomplete>
             </md-chips>
-          </div>
 
           <!-- phones -->
           <div class="section">
-            <div class="attr" ng-repeat="phone in card.phones">
-              <div layout="row" layout-align="center end">
+            <div class="attr" ng-repeat="phone in editor.card.phones">
+              <div class="md-layout-margin" layout="row" layout-align="space-between end">
                 <md-select ng-model="phone.type" label:placeholder="Type">
-                  <md-option ng-repeat="type in allTelTypes" ng-value="type">{{ type }}</md-option>
+                  <md-option ng-repeat="type in ::editor.allTelTypes" ng-value="type">{{ type }}</md-option>
                 </md-select>
                 <md-input-container>
-                  <label class="pseudo-input-label">
+                  <label>
                     <var:string label:value="Phone Number"/>
                   </label>
                   <input type="text" ng-model="phone.value"
                          sg-focus-on="phone_{{$index}}"/>
                 </md-input-container>
-                <md-button class="iconButton" ng-click="card.$delete('phones', $index)">
+                <md-button class="iconButton" type="button" ng-click="editor.card.$delete('phones', $index)">
                   <i class="md-icon-remove-circle"><!-- remove --></i>
                 </md-button>
               </div>
             </div>
 
             <div class="md-layout-margin" layout="row" layout-align="start center">
-              <md-button class="iconButton" type="button" ng-click="addPhone()">
+              <md-button class="iconButton" type="button" ng-click="editor.addPhone()">
                 <i class="md-icon-add"><!-- new --></i>
               </md-button>
               <label class="button-label">
@@ -166,24 +164,24 @@
 
           <!-- urls -->
           <div class="section">
-            <div class="attr" ng-repeat="url in card.urls">
-              <div layout="row" layout-align="center end">
+            <div class="attr" ng-repeat="url in editor.card.urls">
+              <div class="md-layout-margin" layout="row" layout-align="space-between end">
                 <md-select ng-model="url.type" label:placeholder="Type">
-                  <md-option ng-repeat="type in allUrlTypes" value="type">{{ type }}</md-option>
+                  <md-option ng-repeat="type in ::editor.allUrlTypes" ng-value="type">{{ type }}</md-option>
                 </md-select>
                 <md-input-container>
-                  <label class="pseudo-input-label">
+                  <label>
                     <var:string label:value="URL"/>
                   </label>
                   <input type="url" ng-model="url.value" sg-focus-on="url_{{$index}}"/>
                 </md-input-container>
-                <md-button class="iconButton" ng-click="card.$delete('urls', $index)">
+                <md-button class="iconButton" type="button" ng-click="editor.card.$delete('urls', $index)">
                   <i class="md-icon-remove-circle"><!-- remove --></i>
                 </md-button>
               </div>
             </div>
             <div class="md-layout-margin" layout="row" layout-align="start center">
-              <md-button class="iconButton" type="button" ng-click="addUrl()">
+              <md-button class="iconButton" type="button" ng-click="editor.addUrl()">
                 <i class="md-icon-add"><!-- new --></i>
               </md-button>
               <label class="button-label">
@@ -194,10 +192,10 @@
 
           <!-- addresses -->
           <div class="section">
-            <div class="attr" ng-repeat="address in card.addresses">
+            <div class="attr" ng-repeat="address in editor.card.addresses">
               <div layout="row" layout-align="center end">
                 <md-select ng-model="address.type" label:placeholder="Type">
-                  <md-option ng-repeat="type in allAddressTypes" ng-value="type">{{ type }}</md-option>
+                  <md-option ng-repeat="type in ::editor.allAddressTypes" ng-value="type">{{ type }}</md-option>
                 </md-select>
                 <md-input-container>
                   <label>
@@ -252,13 +250,13 @@
                   </label>
                   <input type="text" ng-model="address.postalcode"/>
                 </md-input-container>
-                <md-button class="iconButton" ng-click="card.$delete('addresses', $index)">
+                <md-button class="iconButton" type="button" ng-click="editor.card.$delete('addresses', $index)">
                   <i class="md-icon-remove-circle"><!-- remove --></i>
                 </md-button>
               </div>
             </div>
             <div class="md-layout-margin" layout="row" layout-align="start center">
-              <md-button class="iconButton" type="button" ng-click="addAddress()">
+              <md-button class="iconButton" type="button" ng-click="editor.addAddress()">
                 <i class="md-icon-add"><!-- new --></i>
               </md-button>
               <label class="button-label">
@@ -272,14 +270,14 @@
             <label class="right inline">
               <var:string label:value="Note"/>
             </label>
-            <textarea ng-model="card.note"><!-- note --></textarea>
+            <textarea ng-model="editor.card.note"><!-- note --></textarea>
           </md-input-container>
 
           <div class="fieldset md-layout-margin" layout="row" layout-align="end center">
-            <md-button type="button" ng-click="cancel()">
+            <md-button type="button" ng-click="editor.cancel()">
               <var:string label:value="Cancel"/>
             </md-button>
-            <md-button type="button" ng-click="reset()">
+            <md-button type="button" ng-click="editor.reset()">
               <var:string label:value="Reset"/>
             </md-button>
             <md-button class="md-primary md-hue-3" type="submit">
@@ -289,26 +287,26 @@
         </form>
 
         <!-- list editor -->
-        <form name="listForm" ng-if="card.$isList()" ng-submit="save(listForm)">
+        <form name="listForm" ng-if="editor.card.$isList()" ng-submit="editor.save(listForm)">
           <md-input-container>
-            <label class="pseudo-input-label">
+            <label>
               <var:string label:value="Display"/>
             </label>
-            <input type="text" ng-maxlength="30" ng-model="card.fn"/>
+            <input type="text" ng-maxlength="30" ng-model="editor.card.fn"/>
           </md-input-container>
           
           <md-input-container>
-            <label class="pseudo-input-label">
+            <label>
               <var:string label:value="Nickname"/>
             </label>
-            <input type="text" ng-maxlength="30" ng-model="card.nickname"/>
+            <input type="text" ng-maxlength="30" ng-model="editor.card.nickname"/>
           </md-input-container>
 
           <md-input-container>
-            <label class=" right inline">
+            <label>
               <var:string label:value="Description"/>
             </label>
-            <textarea ng-model="card.description"><!-- note --></textarea>
+            <textarea ng-model="editor.card.description"><!-- note --></textarea>
           </md-input-container>
           
           <!-- list members -->
@@ -317,8 +315,8 @@
                   <var:string label:value="Members:"/>
             </label>
             <md-contact-chips
-                ng-model="card.refs"
-                md-contacts="userFilter($query, card.refs)"
+                ng-model="editor.card.refs"
+                md-contacts="editor.userFilter($query, editor.card.refs)"
                 md-contact-name="$$fullname"
                 md-contact-image="$$image"
                 md-contact-email="$$email"
@@ -328,10 +326,10 @@
           </div>
           
           <div class="fieldset md-layout-margin" layout="row" layout-align="end center">
-            <md-button class="" ng-click="cancel()">
+            <md-button type="button" ng-click="editor.cancel()">
               <var:string label:value="Cancel"/>
             </md-button>
-            <md-button class="" ng-click="reset()">
+            <md-button type="button" ng-click="editor.reset()">
               <var:string label:value="Reset"/>
             </md-button>
             <var:if condition="canCreateOrModify">
@@ -344,6 +342,4 @@
       </div>
     </md-content>
 
-
-
 </container>
diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index 96c34860d..9d8647ada 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -154,34 +154,34 @@
               <span><var:string label:value="AddressBooks"/></span>
               <md-button class="iconButton"
                          label:aria-label="New Addressbook..."
-                         ng-click="newAddressbook()">
+                         ng-click="app.newAddressbook()">
                 <i class="md-icon-add-circle-outline"><!-- add --></i>
               </md-button>
             </div>
           </md-subheader>
           <md-list>
-            <md-list-item ng-repeat="folder in service.$addressbooks track by folder.id"
-                          ng-click="select(folder)"
-                          ng-dblclick="edit($index, folder)"
+            <md-list-item ng-repeat="folder in app.service.$addressbooks track by folder.id"
+                          ng-click="app.select(folder)"
+                          ng-dblclick="app.edit(folder)"
                           ui-sref="app.addressbook({addressbookId: folder.id})"
                           ui-sref-active="sg-active">
               <i ng-class="{'md-icon-public': folder.isRemote, 'md-icon-contacts': folder.isEditable}"><!-- icon --></i>
               <p class="sg-item-name"
-                 ng-show="editMode!=folder.id"> {{folder.name}}</p>
+                 ng-show="app.editMode!=folder.id"> {{folder.name}}</p>
               <md-input-container class="md-flex md-tile-content"
-                                  ng-show="editMode==folder.id">
+                                  ng-show="app.editMode==folder.id">
                 <input class="folder-name" type="text"
                        label:aria-label="Name of the Address Book"
                        ng-model="folder.name"
                        ng-cloak="ng-cloak"
-                       ng-blur="save($index, folder)"
+                       ng-blur="app.save(folder)"
                        sg-focus-on="addressBookName_{{folder.id}}"
-                       sg-enter="save(folder)"
-                       sg-escape="revertEditing(folder)"/>
+                       sg-enter="app.save(folder)"
+                       sg-escape="app.revertEditing(folder)"/>
               </md-input-container>
               <md-button class="iconButton md-secondary" label:aria-label="Options"
-                         ng-show="currentFolder.id==folder.id"
-                         ng-click="share(folder)">
+                         ng-show="app.service.selectedFolder.id==folder.id"
+                         ng-click="app.share(folder)">
                 <i class="md-icon-more-vert"><!-- options --></i>
               </md-button>
             </md-list-item>
@@ -195,34 +195,34 @@
               <md-button class="iconButton"
                          label:aria-label="Subscribe to an Addressbook..."
                          sg-subscribe="contact"
-                         sg-subscribe-on-select="subscribeToFolder(folderData)">
+                         sg-subscribe-on-select="app.subscribeToFolder(folderData)">
                 <i class="md-icon-add-circle-outline"><!-- add --></i>
               </md-button>
             </div>
           </md-subheader>
           <md-list>
-            <md-list-item ng-repeat="folder in service.$subscriptions track by folder.id"
-                          ng-click="select(folder)"
-                          ng-dblclick="edit($index, folder)"
+            <md-list-item ng-repeat="folder in app.service.$subscriptions track by folder.id"
+                          ng-click="app.select(folder)"
+                          ng-dblclick="app.edit(folder)"
                           ui-sref="app.addressbook({addressbookId: folder.id})"
                           ui-sref-active="sg-active">
               <i ng-class="{'md-icon-public': folder.isRemote, 'md-icon-contacts': folder.isEditable}"><!-- icon --></i>
               <p class="sg-item-name"
                  ng-show="editMode!=folder.id">{{folder.name}}</p>
               <md-input-container class="md-flex md-tile-content"
-                                  ng-show="editMode==folder.id">
+                                  ng-show="app.editMode==folder.id">
                 <input class="folder-name" type="text"
                        label:aria-label="Name of the Address Book"
                        ng-model="folder.name"
                        ng-cloak="ng-cloak"
-                       ng-blur="save($index, folder)"
+                       ng-blur="app.save(folder)"
                        sg-focus-on="addressBookName_{{folder.id}}"
-                       sg-enter="save(folder)"
-                       sg-escape="revertEditing(folder)"/>
+                       sg-enter="app.save(folder)"
+                       sg-escape="app.revertEditing(folder)"/>
               </md-input-container>
               <md-button class="iconButton md-secondary" label:aria-label="Options"
-                         ng-show="currentFolder.id==folder.id"
-                         ng-click="">
+                         ng-show="app.service.selectedFolder.id==folder.id"
+                         ng-click="app.confirmDelete(folder)">
                 <i class="md-icon-more-vert"><!-- options --></i>
               </md-button>
             </md-list-item>
@@ -234,8 +234,8 @@
             <var:string label:value="Global Addressbooks"/>
           </md-subheader>
           <md-list>
-            <md-list-item ng-repeat="folder in service.$remotes track by folder.id"
-                          ng-click="select(folder)"
+            <md-list-item ng-repeat="folder in app.service.$remotes track by folder.id"
+                          ng-click="app.select(folder)"
                           ui-sref="app.addressbook({addressbookId: folder.id})"
                           ui-sref-active="sg-active">
               <i ng-class="{'md-icon-public': folder.isRemote, 'md-icon-contacts': folder.isEditable}"><!-- icon --></i>
@@ -256,9 +256,9 @@
       </div>
       <div class="md-toolbar-tools md-toolbar-tools-bottom"
            layout="row" layout-align="space-between center"
-           ng-show="currentFolder.$selectedCount() == 0">
+           ng-show="addressbook.selectedFolder.$selectedCount() == 0">
         <div class="view-list sg-padded" layout="row" layout-align="space-between center"
-             sg-search="currentFolder.$filter(searchText, { search: searchField })">
+             sg-search="addressbook.selectedFolder.$filter(searchText, { search: searchField })">
           <md-input-container class="sg-search-field-container">
             <label style="color: white"><i class="md-icon-search"><!--icon--></i><var:string label:value="Search"/></label>
             <input name="folderSearch" type="search" style="color: white"/>
@@ -273,12 +273,12 @@
           </div>
         </div>
       </div>
-      <div layout="row" layout-align="start center" ng-show="currentFolder.$selectedCount() > 0">
-        <md-button ng-click="unselectCards()">
+      <div layout="row" layout-align="start center" ng-show="addressbook.selectedFolder.$selectedCount() > 0">
+        <md-button ng-click="addressbook.unselectCards()">
           <i class="md-icon-arrow-back"><!-- unselect all --></i>
         </md-button>
-        <label>{{currentFolder.$selectedCount()}} selected</label>
-        <md-button ng-click="confirmDeleteSelectedCards()">
+        <label>{{addressbook.selectedFolder.$selectedCount()}} selected</label>
+        <md-button ng-click="addressbook.confirmDeleteSelectedCards()">
           <i class="md-icon-delete"><!-- delete --></i>
         </md-button>
         <md-button>
@@ -308,30 +308,29 @@
         -->
         <md-list vs-repeat="72" vs-scroll-parent="#contactsList">
           <md-list-item
-              ng-repeat="currentCard in currentFolder.cards track by currentCard.id"
-              ng-class="{'sg-active': card.id == currentCard.id}"
-              ng-click="selectCard(currentCard)"
+              ng-repeat="currentCard in addressbook.selectedFolder.cards track by currentCard.id"
+              ng-click="addressbook.selectCard(currentCard)"
               ui-sref-active="sg-active"
-              ui-sref="app.addressbook.card.view({addressbookId: currentFolder.id, cardId: currentCard.id})">
+              ui-sref="app.addressbook.card.view({addressbookId: addressbook.selectedFolder.id, cardId: currentCard.id})">
             <div class="sg-selected-avatar" ng-show="currentCard.selected"
                  ng-click="currentCard.selected = !currentCard.selected">
               <!-- selected avatar -->
             </div>
-              <sg-gravatar-image class="md-tile-left"
-                                 ng-show="notSelectedComponent(currentCard,'vcard')"
-                                 ng-click="currentCard.selected = !currentCard.selected"
-                                 email="{{currentCard.$preferredEmail(currentFolder.$query)}}"
-                                 size="48">
-                <!-- gravatar -->
-              </sg-gravatar-image>
-              <div class="sg-list-avatar"
-                   ng-show="notSelectedComponent(currentCard, 'vlist')"
-                   ng-click="currentCard.selected = !currentCard.selected">
-                <!--list avatar-->
-              </div>
-              <div class="sg-tile-content">
-                <div class="sg-md-subhead-multi" ng-bind-html="currentCard.$fullname()"><!-- cn --></div>
-                <div class="sg-md-body-multi">{{currentCard.$preferredEmail(currentFolder.$query)}}</div>
+            <sg-gravatar-image class="md-tile-left"
+                               ng-show="addressbook.notSelectedComponent(currentCard,'vcard')"
+                               ng-click="currentCard.selected = !currentCard.selected"
+                               email="{{currentCard.$preferredEmail(addressbook.selectedFolder.$query)}}"
+                               size="48">
+              <!-- contact avatar -->
+            </sg-gravatar-image>
+            <div class="sg-list-avatar"
+                 ng-show="addressbook.notSelectedComponent(currentCard, 'vlist')"
+                 ng-click="currentCard.selected = !currentCard.selected">
+              <!-- list avatar -->
+            </div>
+            <div class="sg-tile-content">
+              <div class="sg-md-subhead-multi" ng-bind-html="currentCard.$fullname()"><!-- cn --></div>
+              <div class="sg-md-body-multi">{{currentCard.$preferredEmail(addressbook.selectedFolder.$query)}}</div>
             </div>
           </md-list-item>
         </md-list>
@@ -339,14 +338,14 @@
 
       <md-button class="iconButton md-fab md-fab-bottom-right md-accent"
                  label:aria-label="New Contact"
-                 ng-click="newComponent($event)">
+                 ng-click="addressbook.newComponent($event)">
         <i class="md-icon-add"><!--icon--></i>
       </md-button>
       </div>
 
       <!-- This extra container is used to animate views transitions
            double quotes in ng-animate is not a typo                         -->
-      <div id="detailView" class="view-detail ng-cloak" ng-show="card" layout="column">
+      <div id="detailView" class="view-detail ng-cloak" layout="column">
         <md-card class="viewer" ui-view="card"><!-- card view --></md-card>
       </div>
 
diff --git a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
index be41b10f3..9260862c2 100644
--- a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
@@ -7,21 +7,23 @@
     >
 
     <md-card-content>
-      <md-button class="iconButton show-sm" ng-click="toggleDetailView()"><i class="md-icon-close"><!--icon--></i></md-button>
+      <md-button class="iconButton show-sm"
+                 label:aria-label="Close"
+                 ng-click="editor.toggleDetailView()"><i class="md-icon-close"><!--icon--></i></md-button>
       <header>
-        <div ng-show="card.tag == 'vcard'">
+        <div ng-show="editor.card.tag == 'vcard'">
           <sg-gravatar-image class="md-tile-left"
-                             email="{{card.$preferredEmail()}}"
+                             email="{{editor.card.$preferredEmail()}}"
                              size="48"><!-- gravatar -->
           </sg-gravatar-image>
         </div>
-        <div class="sg-list-avatar" ng-show="card.tag == 'vlist'">
+        <div class="sg-list-avatar" ng-show="editor.card.tag == 'vlist'">
           <!--list avatar-->
         </div>
         <div class="msg-header-content">
-          <h1 class="sg-md-display-2--light" ng-bind-html="card.$fullname()"><!-- fullname --></h1>
-          <h6 class="sg-md-display-2-subheader">{{card.$description()}}</h6>
-          <md-chips ng-model="card.categories"
+          <h1 class="sg-md-display-2--light" ng-bind-html="editor.card.$fullname()"><!-- fullname --></h1>
+          <h6 class="sg-md-display-2-subheader">{{editor.card.$description()}}</h6>
+          <md-chips ng-model="editor.card.categories"
                     readonly="true">
             <md-chip-template>
               {{$chip.value}}
@@ -31,11 +33,11 @@
         <div class="sg-icon-bar--vertical">
           <md-button class="iconButton"
                      label:aria-label="Edit"
-                     ng-show="currentFolder.isEditable"
-                     ui-sref="app.addressbook.card.editor({addressbookId: currentFolder.id, cardId: card.id})">
+                     ng-show="editor.currentFolder.isEditable"
+                     ui-sref="app.addressbook.card.editor({addressbookId: editor.currentFolder.id, cardId: editor.card.id})">
             <i class="md-icon-create"><!-- edit --></i>
           </md-button>
-          <md-button class="iconButton" aria-label="Delete" ng-click="confirmDelete(card)">
+          <md-button class="iconButton" aria-label="Delete" ng-click="editor.confirmDelete(editor.card)">
             <i class="md-icon-delete"><!-- delete --></i>
           </md-button>
         </div>
@@ -43,30 +45,32 @@
       <md-divider class="md-inset"><!-- divider --></md-divider>
       <section class="msg-body">
 
-        <div class="pseudo-input-container" ng-show="card.birthday">
+        <div class="pseudo-input-container" ng-show="editor.card.birthday">
           <div class="key">
             <label class="pseudo-input-label">
               <var:string label:value="Birthday"/>
             </label>
           </div>
           <div class="pseudo-input-field">
-            <span>{{card.$birthday() | date}}</span>
+            <span>{{editor.card.$birthday() | date}}</span>
           </div>
         </div>
 
         <!-- list members -->
-        <div class="section" ng-show="card.refs.length > 0">
+        <div class="section" ng-show="editor.card.refs.length > 0">
           <label class="pseudo-input-label">
             <var:string label:value="Members"/>
           </label>
           <md-list>
-            <md-list-item class="md-3-line" ng-repeat="ref in card.refs track by ref.reference">
-              <div class="sg-avatar">
-                <!--avatar--><!-- currentCard.tag = vcard || vlist -->
-              </div>
+            <md-list-item class="md-3-line" ng-repeat="ref in editor.card.refs track by ref.reference">
+              <sg-gravatar-image class="md-tile-left"
+                                 email="{{ref.$preferredEmail()}}"
+                                 size="48">
+                <!-- contact avatar -->
+              </sg-gravatar-image>
               <div class="md-list-item-text">
                 <h3>
-                  <a ui-sref="app.addressbook.card.view({addressbookId: currentFolder.id, cardId: ref.reference})">
+                  <a ui-sref="app.addressbook.card.view({addressbookId: editor.currentFolder.id, cardId: ref.reference})">
                     {{ ref.$fullname() }}
                   </a>
                 </h3>
@@ -80,8 +84,8 @@
           </md-list>
         </div>
         
-        <div class="section">
-          <div class="pseudo-input-container" ng-repeat="email in card.emails">
+        <div class="section" ng-show="editor.card.emails.length > 0">
+          <div class="pseudo-input-container" ng-repeat="email in editor.card.emails">
             <div class="key">
               <label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{email.type}}</label>
             </div>
@@ -93,8 +97,8 @@
           </div>
         </div>
         
-        <div class="section" ng-show="card.phones.length > 0">
-          <div class="pseudo-input-container" ng-repeat="phone in card.phones">
+        <div class="section" ng-show="editor.card.phones.length > 0">
+          <div class="pseudo-input-container" ng-repeat="phone in editor.card.phones">
             <div class="key">
               <label class="pseudo-input-label">{{phone.type}}</label>
             </div>
@@ -105,8 +109,8 @@
 
           </div>
         </div>
-        <div class="section" ng-show="card.urls">
-          <div class="pseudo-input-container" ng-repeat="url in card.urls">
+        <div class="section" ng-show="editor.card.urls">
+          <div class="pseudo-input-container" ng-repeat="url in editor.card.urls">
             <div class="key">
               <label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{url.type}}
               </label>
@@ -118,8 +122,8 @@
 
           </div>
         </div>
-        <div class="section" ng-show="card.addresses">
-          <div class="pseudo-input-container" ng-repeat="address in card.addresses">
+        <div class="section" ng-show="editor.card.addresses">
+          <div class="pseudo-input-container" ng-repeat="address in editor.card.addresses">
             <div class="key">
               <label class="pseudo-input-label">{{address.type}}</label>
             </div>
@@ -128,14 +132,14 @@
             </div>
           </div>
         </div>
-        <div class="pseudo-input-container" ng-show="card.note">
+        <div class="pseudo-input-container" ng-show="editor.card.note">
           <div class="key">
             <label class="pseudo-input-label">
               <var:string label:value="Note"/>
             </label>
           </div>
           <div class="pseudo-input-field">
-            <div ng-bind-html="card.note"><!-- note --></div>
+            <div ng-bind-html="editor.card.note"><!-- note --></div>
           </div>
         </div>
       </section>
diff --git a/UI/WebServerResources/js/Contacts.app.js b/UI/WebServerResources/js/Contacts.app.js
index deeeb2a65..5850f50d1 100644
--- a/UI/WebServerResources/js/Contacts.app.js
+++ b/UI/WebServerResources/js/Contacts.app.js
@@ -33,7 +33,8 @@
         views: {
           addressbooks: {
             templateUrl: 'UIxContactFoldersView', // UI/Templates/Contacts/UIxContactFoldersView.wox
-            controller: 'AddressBooksController'
+            controller: 'AddressBooksController',
+            controllerAs: 'app'
           }
         },
         resolve: {
@@ -45,7 +46,8 @@
         views: {
           addressbook: {
             templateUrl: 'addressbook',
-            controller: 'AddressBookController'
+            controller: 'AddressBookController',
+            controllerAs: 'addressbook'
           }
         },
         resolve: {
@@ -57,7 +59,8 @@
         views: {
           card: {
             templateUrl: 'UIxContactEditorTemplate', // UI/Templates/Contacts/UIxContactEditorTemplate.wox
-            controller: 'CardController'
+            controller: 'CardController',
+            controllerAs: 'editor'
           }
         },
         resolve: {
@@ -81,7 +84,8 @@
         views: {
           'card@app.addressbook': {
             templateUrl: 'UIxContactViewTemplate', // UI/Templates/Contacts/UIxContactViewTemplate.wox
-            controller: 'CardController'
+            controller: 'CardController',
+            controllerAs: 'editor'
           }
         }
       })
@@ -90,7 +94,8 @@
         views: {
           'card@app.addressbook': {
             templateUrl: 'UIxContactEditorTemplate', // UI/Templates/Contacts/UIxContactEditorTemplate.wox
-            controller: 'CardController'
+            controller: 'CardController',
+            controllerAs: 'editor'
           }
         }
       });
diff --git a/UI/WebServerResources/js/Contacts/AddressBook.service.js b/UI/WebServerResources/js/Contacts/AddressBook.service.js
index 5303b7018..9825a7db2 100644
--- a/UI/WebServerResources/js/Contacts/AddressBook.service.js
+++ b/UI/WebServerResources/js/Contacts/AddressBook.service.js
@@ -40,7 +40,8 @@
       $$resource: new Resource(Settings.activeUser.folderURL + 'Contacts', Settings.activeUser),
       $Card: Card,
       $$Acl: Acl,
-      activeUser: Settings.activeUser
+      activeUser: Settings.activeUser,
+      selectedFolder: null
     });
 
     return AddressBook; // return constructor
@@ -156,13 +157,13 @@
    * @param {object} data - attributes of addressbook
    */
   AddressBook.prototype.init = function(data) {
+    this.$cards = [];
+    this.cards = [];
     angular.extend(this, data);
     // Add 'isOwned' and 'isSubscription' attributes based on active user (TODO: add it server-side?)
     this.isOwned = AddressBook.activeUser.isSuperUser || this.owner == AddressBook.activeUser.login;
     this.isSubscription = !this.isRemote && this.owner != AddressBook.activeUser.login;
     this.$query = undefined;
-    this.$cards = [];
-    this.cards = [];
   };
 
   /**
@@ -172,9 +173,16 @@
    * @returns a promise of the addressbook id
    */
   AddressBook.prototype.$id = function() {
-    return this.$futureAddressBookData.then(function(data) {
-      return data.id;
-    });
+    if (this.id) {
+      // Object already unwrapped
+      return AddressBook.$q.when(this.id);
+    }
+    else {
+      // Wait until object is unwrapped
+      return this.$futureAddressBookData.then(function(addressbook) {
+        return addressbook.id;
+      });
+    }
   };
 
   /**
@@ -194,6 +202,46 @@
   };
 
   /**
+   * @function $reload
+   * @memberof AddressBook.prototype
+   * @desc Reload list of cards
+   * @returns a promise of the Cards instances
+   */
+  AddressBook.prototype.$reload = function() {
+    var _this = this;
+
+    return AddressBook.$$resource.fetch(this.id, 'view')
+      .then(function(response) {
+        var index, card,
+            results = response.cards,
+            cards = _this.cards;
+
+        // Add new cards
+        angular.forEach(results, function(data) {
+          if (!_.find(cards, function(card) {
+            return card.id == data.id;
+          })) {
+            var card = new AddressBook.$Card(data),
+                index = _.sortedIndex(cards, card, '$$fullname');
+            cards.splice(index, 0, card);
+          }
+        });
+
+        // Remove cards that no longer exist
+        for (index = cards.length - 1; index >= 0; index--) {
+          card = cards[index];
+          if (!_.find(results, function(data) {
+            return card.id == data.id;
+          })) {
+            cards.splice(index, 1);
+          }
+        }
+
+        return cards;
+      });
+  };
+
+    /**
    * @function $filter
    * @memberof AddressBook.prototype
    * @desc Search for cards matching some criterias
@@ -203,13 +251,13 @@
    */
   AddressBook.prototype.$filter = function(search, excludedCards, options) {
     var _this = this,
-        deferred = AddressBook.$q.defer(),
         params = {
           search: 'name_or_address',
           value: search,
           sort: 'c_cn',
           asc: 'true'
         };
+
     if (options) {
       angular.extend(params, options);
 
@@ -217,65 +265,60 @@
         if (!search) {
           // No query specified
           this.$cards = [];
-          deferred.resolve(this.$cards);
-          return deferred.promise;
+          return AddressBook.$q.when(this.$cards);
         }
         else if (this.$query == search) {
           // Query hasn't changed
-          deferred.resolve(this.$cards);
-          return deferred.promise;
+          return AddressBook.$q.when(this.$cards);
         }
       }
     }
     this.$query = search;
 
-    this.$id().then(function(addressbookId) {
-      var futureAddressBookData = AddressBook.$$resource.fetch(addressbookId, 'view', params);
-      futureAddressBookData.then(function(response) {
-        var results, cards, card, index;
-        if (options && options.dry) {
-          // Don't keep a copy of the resulting cards.
-          // This is usefull when doing autocompletion.
-          cards = _this.$cards;
-        }
-        else {
-          cards = _this.cards;
-        }
-        if (excludedCards) {
-          // Remove excluded cards from results
-          results = _.filter(response.cards, function(data) {
-            return !_.find(excludedCards, function(card) {
-              return card.id == data.id;
-            });
+    return this.$id().then(function(addressbookId) {
+      return AddressBook.$$resource.fetch(addressbookId, 'view', params);
+    }).then(function(response) {
+      var results, cards, card, index;
+      if (options && options.dry) {
+        // Don't keep a copy of the resulting cards.
+        // This is usefull when doing autocompletion.
+        cards = _this.$cards;
+      }
+      else {
+        cards = _this.cards;
+      }
+      if (excludedCards) {
+        // Remove excluded cards from results
+        results = _.filter(response.cards, function(data) {
+          return !_.find(excludedCards, function(card) {
+            return card.id == data.id;
           });
-        }
-        else {
-            results = response.cards;
-        }
-        // Add new cards matching the search query
-        angular.forEach(results, function(data) {
-          if (!_.find(cards, function(card) {
-            return card.id == data.id;
-          })) {
-            var card = new AddressBook.$Card(data, search),
-                index = _.sortedIndex(cards, card, '$$fullname');
-            cards.splice(index, 0, card);
-          }
         });
-        // Remove cards that no longer match the search query
-        for (index = cards.length - 1; index >= 0; index--) {
-          card = cards[index];
-          if (!_.find(results, function(data) {
-            return card.id == data.id;
-          })) {
-            cards.splice(index, 1);
-          }
+      }
+      else {
+        results = response.cards;
+      }
+      // Add new cards matching the search query
+      angular.forEach(results, function(data) {
+        if (!_.find(cards, function(card) {
+          return card.id == data.id;
+        })) {
+          var card = new AddressBook.$Card(data, search),
+              index = _.sortedIndex(cards, card, '$$fullname');
+          cards.splice(index, 0, card);
         }
-        deferred.resolve(cards);
-      }, deferred.reject);
-    }, deferred.reject);
-
-    return deferred.promise;
+      });
+      // Remove cards that no longer match the search query
+      for (index = cards.length - 1; index >= 0; index--) {
+        card = cards[index];
+        if (!_.find(results, function(data) {
+          return card.id == data.id;
+        })) {
+          cards.splice(index, 1);
+        }
+      }
+      return cards;
+    });
   };
 
   /**
@@ -377,21 +420,23 @@
     this.$futureAddressBookData = futureAddressBookData;
     // Resolve the promise
     this.$futureAddressBookData.then(function(data) {
-      AddressBook.$timeout(function() {
-        _this.init(data);
-        // Also extend AddressBook instance from data of addressbooks list.
+      return AddressBook.$timeout(function() {
+        // Extend AddressBook instance from data of addressbooks list.
         // Will inherit attributes such as isEditable and isRemote.
         angular.forEach(AddressBook.$findAll(), function(o, i) {
-          if (o.id == _this.id) {
+          if (o.id == data.id) {
             angular.extend(_this, o);
           }
         });
+        // Extend AddressBook instance with received data
+        _this.init(data);
         // Instanciate Card objects
         angular.forEach(_this.cards, function(o, i) {
           _this.cards[i] = new AddressBook.$Card(o);
         });
         // Instanciate Acl object
         _this.$acl = new AddressBook.$$Acl('Contacts/' + _this.id);
+        return _this;
       });
     }, function(data) {
       _this.isError = true;
diff --git a/UI/WebServerResources/js/Contacts/AddressBookController.js b/UI/WebServerResources/js/Contacts/AddressBookController.js
index 7b982bdcc..3a85f8219 100644
--- a/UI/WebServerResources/js/Contacts/AddressBookController.js
+++ b/UI/WebServerResources/js/Contacts/AddressBookController.js
@@ -8,16 +8,22 @@
    */
   AddressBookController.$inject = ['$state', '$scope', '$rootScope', '$stateParams', '$timeout', '$mdDialog', 'sgFocus', 'Card', 'AddressBook', 'Dialog', 'sgSettings', 'stateAddressbooks', 'stateAddressbook'];
   function AddressBookController($state, $scope, $rootScope, $stateParams, $timeout, $mdDialog, focus, Card, AddressBook, Dialog, Settings, stateAddressbooks, stateAddressbook) {
-    var currentAddressbook;
+    var vm = this;
 
-    $rootScope.currentFolder = stateAddressbook;
-    $rootScope.card = null;
+    AddressBook.selectedFolder = stateAddressbook;
+
+    vm.selectedFolder = stateAddressbook;
+    vm.selectCard = selectCard;
+    vm.newComponent = newComponent;
+    vm.notSelectedComponent = notSelectedComponent;
+    vm.unselectCards = unselectCards;
+    vm.confirmDeleteSelectedCards = confirmDeleteSelectedCards;
     
-    $scope.selectCard = function(card) {
+    function selectCard(card) {
       $state.go('app.addressbook.card.view', {addressbookId: stateAddressbook.id, cardId: card.id});
-    };
+    }
     
-    $scope.newComponent = function(ev) {
+    function newComponent(ev) {
       $mdDialog.show({
         parent: angular.element(document.body),
         targetEvent: ev,
@@ -39,7 +45,7 @@
         ].join(''),
         locals: {
           state: $state,
-          addressbookId: $scope.currentFolder.id
+          addressbookId: vm.selectedFolder.id
         },
         controller: ComponentDialogController
       });
@@ -54,27 +60,27 @@
           state.go('app.addressbook.new', { addressbookId: addressbookId, contactType: type });
         }
       }
-    };
+    }
 
-    $scope.notSelectedComponent = function(currentCard, type) {
+    function notSelectedComponent(currentCard, type) {
       return (currentCard.tag == type && !currentCard.selected);
-    };
+    }
 
-    $scope.unselectCards = function() {
-      _.each($rootScope.currentFolder.cards, function(card) { card.selected = false; });
-    };
+    function unselectCards() {
+      _.each(vm.selectedFolder.cards, function(card) { card.selected = false; });
+    }
     
-    $scope.confirmDeleteSelectedCards = function() {
+    function confirmDeleteSelectedCards() {
       Dialog.confirm(l('Warning'),
                      l('Are you sure you want to delete the selected contacts?'))
         .then(function() {
           // User confirmed the deletion
-          var selectedCards = _.filter($rootScope.currentFolder.cards, function(card) { return card.selected });
-          $rootScope.currentFolder.$deleteCards(selectedCards);
+          var selectedCards = _.filter(vm.selectedFolder.cards, function(card) { return card.selected });
+          vm.selectedFolder.$deleteCards(selectedCards);
         },  function(data, status) {
           // Delete failed
         });
-    };
+    }
   }
 
   angular
diff --git a/UI/WebServerResources/js/Contacts/AddressBooksController.js b/UI/WebServerResources/js/Contacts/AddressBooksController.js
index f38464aff..7416b4247 100644
--- a/UI/WebServerResources/js/Contacts/AddressBooksController.js
+++ b/UI/WebServerResources/js/Contacts/AddressBooksController.js
@@ -8,17 +8,27 @@
    */
   AddressBooksController.$inject = ['$state', '$scope', '$rootScope', '$stateParams', '$timeout', '$q', '$mdDialog', 'sgFocus', 'Card', 'AddressBook', 'Dialog', 'sgSettings', 'User', 'stateAddressbooks'];
   function AddressBooksController($state, $scope, $rootScope, $stateParams, $timeout, $q, $mdDialog, focus, Card, AddressBook, Dialog, Settings, User, stateAddressbooks) {
-    var currentAddressbook;
+    var vm = this;
 
-    $scope.activeUser = Settings.activeUser;
-    $scope.service = AddressBook;
+    vm.activeUser = Settings.activeUser;
+    vm.service = AddressBook;
+    vm.select = select;
+    vm.newAddressbook = newAddressbook;
+    vm.edit = edit;
+    vm.revertEditing = revertEditing;
+    vm.save = save;
+    vm.confirmDelete = confirmDelete;
+    vm.importCards = importCards;
+    vm.exportCards = exportCards;
+    vm.share = share;
+    vm.subscribeToFolder = subscribeToFolder;
 
-    // $scope functions
-    $scope.select = function(folder) {
-      $scope.editMode = false;
+    function select(folder) {
+      vm.editMode = false;
       $state.go('app.addressbook', {addressbookId: folder.id});
-    };
-    $scope.newAddressbook = function() {
+    }
+
+    function newAddressbook() {
       Dialog.prompt(l('New addressbook'),
                     l('Name of new addressbook'))
         .then(function(name) {
@@ -32,105 +42,133 @@
           );
           AddressBook.$add(addressbook);
         });
-    };
-    $scope.edit = function(index, folder) {
+    }
+
+    function edit(folder) {
       if (!folder.isRemote) {
-        $scope.editMode = folder.id;
-        $scope.originalAddressbook = angular.extend({}, folder.$omit());
+        vm.editMode = folder.id;
+        vm.originalAddressbook = angular.extend({}, folder.$omit());
         focus('addressBookName_' + folder.id);
       }
-    };
-    $scope.revertEditing = function(folder) {
-      folder.name = $scope.originalAddressbook.name;
-      $scope.editMode = false;
-    };
-    $scope.save = function(folder) {
+    }
+
+    function revertEditing(folder) {
+      folder.name = vm.originalAddressbook.name;
+      vm.editMode = false;
+    }
+
+    function save(folder) {
       var name = folder.name;
-      if (name && name.length > 0 && name != $scope.originalAddressbook.name) {
+      if (name && name.length > 0 && name != vm.originalAddressbook.name) {
         folder.$rename(name)
           .then(function(data) {
-            $scope.editMode = false;
+            vm.editMode = false;
           }, function(data, status) {
             Dialog.alert(l('Warning'), data);
           });
       }
-    };
-    $scope.confirmDelete = function() {
-      if ($scope.currentFolder.isSubscription) {
+    }
+
+    function confirmDelete() {
+      if (vm.service.selectedFolder.isSubscription) {
         // Unsubscribe without confirmation
-        $rootScope.currentFolder.$delete()
+        vm.service.selectedFolder.$delete()
           .then(function() {
-            $rootScope.currentFolder = null;
+            vm.service.selectedFolder = null;
             $state.go('app.addressbook', { addressbookId: 'personal' });
           }, function(data, status) {
             Dialog.alert(l('An error occured while deleting the addressbook "%{0}".',
-                           $rootScope.currentFolder.name),
+                           vm.service.selectedFolder.name),
                          l(data.error));
           });
       }
       else {
         Dialog.confirm(l('Warning'), l('Are you sure you want to delete the addressbook <em>%{0}</em>?',
-                                       $scope.currentFolder.name))
+                                       vm.service.selectedFolder.name))
           .then(function() {
-            $rootScope.currentFolder.$delete()
-              .then(function() {
-                $rootScope.currentFolder = null;
-              }, function(data, status) {
-                Dialog.alert(l('An error occured while deleting the addressbook "%{0}".',
-                               $rootScope.currentFolder.name),
-                             l(data.error));
-              });
+            return vm.service.selectedFolder.$delete();
+          })
+          .then(function() {
+            vm.service.selectedFolder = null;
+            return true;
+          })
+          .catch(function(data, status) {
+            Dialog.alert(l('An error occured while deleting the addressbook "%{0}".',
+                           vm.service.selectedFolder.name),
+                         l(data.error));
           });
       }
-    };
-    $scope.importCards = function() {
+    }
 
-    };
-    $scope.exportCards = function() {
-      window.location.href = ApplicationBaseURL + '/' + $scope.currentFolder.id + '/exportFolder';
-    };
-    $scope.share = function(folder) {
-      if (folder.id != $scope.currentFolder.id) {
+    function importCards() {
+
+    }
+
+    function exportCards() {
+      window.location.href = ApplicationBaseURL + '/' + vm.service.selectedFolder.id + '/exportFolder';
+    }
+
+    function share(addressbook) {
+      if (addressbook.id != vm.service.selectedFolder.id) {
         // Counter the possibility to click on the "hidden" secondary button
-        $scope.select(folder);
+        select(addressbook);
         return;
       }
-      $mdDialog.show({
-        templateUrl: $scope.currentFolder.id + '/UIxAclEditor', // UI/Templates/UIxAclEditor.wox
-        controller: AddressBookACLController,
-        clickOutsideToClose: true,
-        escapeToClose: true,
-        locals: {
-          usersWithACL: $scope.currentFolder.$acl.$users(),
-          User: User,
-          stateAddressbook: $scope.currentFolder,
-          $q: $q
-        }
+      // Fetch list of ACL users
+      addressbook.$acl.$users().then(function() {
+        // Show ACL editor
+        $mdDialog.show({
+          templateUrl: addressbook.id + '/UIxAclEditor', // UI/Templates/UIxAclEditor.wox
+          controller: AddressBookACLController,
+          controllerAs: 'acl',
+          clickOutsideToClose: true,
+          escapeToClose: true,
+          locals: {
+            usersWithACL: addressbook.$acl.users,
+            User: User,
+            folder: addressbook,
+            $q: $q
+          }
+        });
       });
+
       /**
        * @ngInject
        */
-      AddressBookACLController.$inject = ['$scope', '$mdDialog', 'usersWithACL', 'User', 'stateAddressbook', '$q'];
-      function AddressBookACLController($scope, $mdDialog, usersWithACL, User, stateAddressbook, $q) {
-        $scope.users = usersWithACL; // ACL users
-        $scope.stateAddressbook = stateAddressbook;
-        $scope.userToAdd = '';
-        $scope.searchText = '';
-        $scope.userFilter = function($query) {
-          return User.$filter($query);
-        };
-        $scope.closeModal = function() {
-          stateAddressbook.$acl.$resetUsersRights(); // cancel changes
+      AddressBookACLController.$inject = ['$scope', '$mdDialog', 'usersWithACL', 'User', 'folder', '$q'];
+      function AddressBookACLController($scope, $mdDialog, usersWithACL, User, folder, $q) {
+        var vm = this;
+
+        vm.users = usersWithACL; // ACL users
+        vm.folder = folder;
+        vm.userToAdd = '';
+        vm.searchText = '';
+        vm.userFilter = userFilter;
+        vm.closeModal = closeModal;
+        vm.saveModal = saveModal;
+        vm.confirmChange = confirmChange;
+        vm.removeUser = removeUser;
+        vm.addUser = addUser;
+        vm.selectUser = selectUser;
+
+        function userFilter($query) {
+          return User.$filter($query, folder.$acl.users);
+        }
+
+        function closeModal() {
+          folder.$acl.$resetUsersRights(); // cancel changes
           $mdDialog.hide();
-        };
-        $scope.saveModal = function() {
-          stateAddressbook.$acl.$saveUsersRights().then(function() {
+        }
+
+        function saveModal() {
+          folder.$acl.$saveUsersRights().then(function() {
             $mdDialog.hide();
           }, function(data, status) {
             Dialog.alert(l('Warning'), l('An error occured please try again.'));
           });
-        };
-        $scope.confirmChange = function(user) {
+        }
+
+        function confirmChange(user) {
           var confirmation = user.$confirmRights();
           if (confirmation) {
             Dialog.confirm(l('Warning'), confirmation).then(function(res) {
@@ -138,48 +176,51 @@
                 user.$resetRights(true);
             });
           }
-        };
-        $scope.removeUser = function(user) {
-          stateAddressbook.$acl.$removeUser(user.uid).then(function() {
-            if (user.uid == $scope.selectedUser.uid) {
-              $scope.selectedUser = null;
+        }
+
+        function removeUser(user) {
+          folder.$acl.$removeUser(user.uid).then(function() {
+            if (user.uid == vm.selectedUser.uid) {
+              vm.selectedUser = null;
             }
           }, function(data, status) {
             Dialog.alert(l('Warning'), l('An error occured please try again.'))
           });
-        };
-        $scope.addUser = function(data) {
+        }
+
+        function addUser(data) {
           if (data) {
-            stateAddressbook.$acl.$addUser(data).then(function() {
-              $scope.userToAdd = '';
-              $scope.searchText = '';
+            folder.$acl.$addUser(data).then(function() {
+              vm.userToAdd = '';
+              vm.searchText = '';
             }, function(error) {
               Dialog.alert(l('Warning'), error);
             });
           }
-        };
-        $scope.selectUser = function(user) {
+        }
+
+        function selectUser(user) {
           // Check if it is a different user
-          if ($scope.selectedUser != user) {
-            $scope.selectedUser = user;
-            $scope.selectedUser.$rights();
+          if (vm.selectedUser != user) {
+            vm.selectedUser = user;
+            vm.selectedUser.$rights();
           }
-        };
-      };
-    };
+        }
+      }
+    }
 
     /**
      * subscribeToFolder - Callback of sgSubscribe directive
      */
-    $scope.subscribeToFolder = function(addressbookData) {
+    function subscribeToFolder(addressbookData) {
       console.debug('subscribeToFolder ' + addressbookData.owner + addressbookData.name);
       AddressBook.$subscribe(addressbookData.owner, addressbookData.name).catch(function(data) {
         Dialog.alert(l('Warning'), l('An error occured please try again.'));
       });
-    };
+    }
   }
 
   angular
-    .module('SOGo.ContactsUI')  
-    .controller('AddressBooksController', AddressBooksController);                                    
+    .module('SOGo.ContactsUI')
+    .controller('AddressBooksController', AddressBooksController);
 })();
diff --git a/UI/WebServerResources/js/Contacts/CardController.js b/UI/WebServerResources/js/Contacts/CardController.js
index 6868aa8e1..2d7bdc0c4 100644
--- a/UI/WebServerResources/js/Contacts/CardController.js
+++ b/UI/WebServerResources/js/Contacts/CardController.js
@@ -7,80 +7,95 @@
    * Controller to view and edit a card
    * @ngInject
    */
-  CardController.$inject = ['$scope', '$rootScope', '$timeout', 'AddressBook', 'Card', 'Dialog', 'sgFocus', '$state', '$stateParams', 'stateCard'];
-  function CardController($scope, $rootScope, $timeout, AddressBook, Card, Dialog, focus, $state, $stateParams, stateCard) {
-    $rootScope.card = stateCard;
+  CardController.$inject = ['$scope', '$timeout', 'AddressBook', 'Card', 'Dialog', 'sgFocus', '$state', '$stateParams', 'stateCard'];
+  function CardController($scope, $timeout, AddressBook, Card, Dialog, focus, $state, $stateParams, stateCard) {
+    var vm = this;
 
-    $scope.allEmailTypes = Card.$EMAIL_TYPES;
-    $scope.allTelTypes = Card.$TEL_TYPES;
-    $scope.allUrlTypes = Card.$URL_TYPES;
-    $scope.allAddressTypes = Card.$ADDRESS_TYPES;
-    $scope.categories = {};
-    $scope.userFilterResults = [];
+    vm.card = stateCard;
 
-    $scope.addOrgUnit = function() {
-      var i = $scope.card.$addOrgUnit('');
+    vm.currentFolder = AddressBook.selectedFolder;
+    vm.allEmailTypes = Card.$EMAIL_TYPES;
+    vm.allTelTypes = Card.$TEL_TYPES;
+    vm.allUrlTypes = Card.$URL_TYPES;
+    vm.allAddressTypes = Card.$ADDRESS_TYPES;
+    vm.categories = {};
+    vm.userFilterResults = [];
+    vm.addOrgUnit = addOrgUnit;
+    vm.addEmail = addEmail;
+    vm.addPhone = addPhone;
+    vm.addUrl = addUrl;
+    vm.addAddress = addAddress;
+    vm.addMember = addMember;
+    vm.userFilter = userFilter;
+    vm.save = save;
+    vm.reset = reset;
+    vm.cancel = cancel;
+    vm.confirmDelete = confirmDelete;
+
+    function addOrgUnit() {
+      var i = vm.card.$addOrgUnit('');
       focus('orgUnit_' + i);
     };
-    $scope.addEmail = function() {
-      var i = $scope.card.$addEmail('');
+    function addEmail() {
+      var i = vm.card.$addEmail('');
       focus('email_' + i);
     };
-    $scope.addPhone = function() {
-      var i = $scope.card.$addPhone('');
+    function addPhone() {
+      var i = vm.card.$addPhone('');
       focus('phone_' + i);
     };
-    $scope.addUrl = function() {
-      var i = $scope.card.$addUrl('', '');
+    function addUrl() {
+      var i = vm.card.$addUrl('', '');
       focus('url_' + i);
     };
-    $scope.addAddress = function() {
-      var i = $scope.card.$addAddress('', '', '', '', '', '', '', '');
+    function addAddress() {
+      var i = vm.card.$addAddress('', '', '', '', '', '', '', '');
       focus('address_' + i);
     };
-    $scope.addMember = function() {
-      var i = $scope.card.$addMember('');
+    function addMember() {
+      var i = vm.card.$addMember('');
       focus('ref_' + i);
     };
-    $scope.userFilter = function($query, excludedCards) {
-      $scope.currentFolder.$filter($query, excludedCards, {dry: true, excludeLists: true});
-      return $scope.currentFolder.$cards;
+    function userFilter($query, excludedCards) {
+      AddressBook.selectedFolder.$filter($query, excludedCards, {dry: true, excludeLists: true});
+      return AddressBook.selectedFolder.$cards;
     };
-    $scope.save = function(form) {
+    function save(form) {
       if (form.$valid) {
-        $scope.card.$save()
+        vm.card.$save()
           .then(function(data) {
-            var i = _.indexOf(_.pluck($scope.currentFolder.cards, 'id'), $scope.card.id);
+            var i = _.indexOf(_.pluck(AddressBook.selectedFolder.cards, 'id'), vm.card.id);
             if (i < 0) {
               // New card; reload contacts list and show addressbook in which the card has been created
-              $rootScope.currentFolder = AddressBook.$find(data.pid);
+              AddressBook.selectedFolder.$reload();
             }
             else {
               // Update contacts list with new version of the Card object
-              $rootScope.currentFolder.cards[i] = angular.copy($scope.card);
+              AddressBook.selectedFolder.cards[i] = angular.copy(vm.card);
             }
-            $state.go('app.addressbook.card.view', { cardId: $scope.card.id });
-          }, function(data, status) {
-            console.debug('failed');
+            $state.go('app.addressbook.card.view', { cardId: vm.card.id });
+          })
+          .catch(function(err) {
+            console.log(err);
           });
       }
     };
-    $scope.reset = function() {
-      $scope.card.$reset();
+    function reset() {
+      vm.card.$reset();
     };
-    $scope.cancel = function() {
-      $scope.card.$reset();
-      if ($scope.card.isNew) {
+    function cancel() {
+      vm.card.$reset();
+      if (vm.card.isNew) {
         // Cancelling the creation of a card
-        $rootScope.card = null;
-        $state.go('app.addressbook', { addressbookId: $scope.currentFolder.id });
+        vm.card = null;
+        $state.go('app.addressbook', { addressbookId: AddressBook.selectedFolder.id });
       }
       else {
         // Cancelling the edition of an existing card
-        $state.go('app.addressbook.card.view', { cardId: $scope.card.id });
+        $state.go('app.addressbook.card.view', { cardId: vm.card.id });
       }
     };
-    $scope.confirmDelete = function(card) {
+    function confirmDelete(card) {
       Dialog.confirm(l('Warning'),
                      l('Are you sure you want to delete the card of %{0}?', card.$fullname()))
         .then(function() {
@@ -88,12 +103,12 @@
           card.$delete()
             .then(function() {
               // Remove card from list of addressbook
-              $rootScope.currentFolder.cards = _.reject($rootScope.currentFolder.cards, function(o) {
+              AddressBook.selectedFolder.cards = _.reject(AddressBook.selectedFolder.cards, function(o) {
                 return o.id == card.id;
               });
               // Remove card object from scope
-              $rootScope.card = null;
-              $state.go('app.addressbook', { addressbookId: $scope.currentFolder.id });
+              vm.card = null;
+              $state.go('app.addressbook', { addressbookId: AddressBook.selectedFolder.id });
             }, function(data, status) {
               Dialog.alert(l('Warning'), l('An error occured while deleting the card "%{0}".',
                                            card.$fullname()));