v4.0.0

12 files changed, 291 insertions, 54 deletions

diff --git a/doc/views/breaking-changes.htm b/doc/views/breaking-changes.htm
index ca83f99..565c079 100644
--- a/doc/views/breaking-changes.htm
+++ b/doc/views/breaking-changes.htm
@@ -3,7 +3,17 @@
 
         <h3 class="pageHeading">Breaking Changes</h3>
 
-        <p>Below are the breaking changes since previous version:</p>
+        <p>Below are the breaking changes since v3.x.x</p>
+        <ol>
+            <li>
+                <code>input-model</code> <strike>is now static (not dynamically updated), hence why we need output-model. On the plus side, you now can 
+                re-use the input model where necessary.</strike> Sorry, it's now back like version 2.x.x. As for now it's the only way to allow dynamic 
+                update into the input-model. If you need to re-use the input model, copy them into a new variable.
+            </li>
+
+        </ol>
+
+        <p>Below are the breaking changes since v2.x.x</p>
         
         <ol>
             <li>
diff --git a/doc/views/configs-options.htm b/doc/views/configs-options.htm
index a627802..6d0af28 100644
--- a/doc/views/configs-options.htm
+++ b/doc/views/configs-options.htm
@@ -174,8 +174,8 @@
             With the input-model above, 
         </p>          
         <ul>
-            <li><code>max-labels="1"</code> will display: "Bruce Wayne, ... (Total: 2)" on the button.</li>
-            <li><code>max-labels="0"</code> will display: "(Total: 2)" on the button.</li>
+            <li><code>max-labels="1"</code> will display: "Bruce Wayne, ... (2)" on the button.</li>
+            <li><code>max-labels="0"</code> will display: "(2)" on the button.</li>
         </ul>
             
         <h5>is-disabled</h5>
@@ -310,7 +310,7 @@
             <span class="inlineTitle">Example</span>: <code>&lt;div isteven-multi-select ... on-item-click="funcClick( data )"&gt;&lt;/div&gt;</code>.              
         </p>        
 
-        <h5>on-select-all</h5> <span class="label label-warning">New! v3.0.0</span>
+        <h5>on-select-all</h5> 
         <p>
             A $scope function to call when "select all" button is clicked.
             You need to define this function in your controller.
@@ -322,7 +322,7 @@
             <span class="inlineTitle">Example</span>: <code>&lt;div isteven-multi-select ... on-select-all="funcSelectAll()"&gt;&lt;/div&gt;</code>.              
         </p>
 
-        <h5>on-select-none</h5> <span class="label label-warning">New! v3.0.0</span>
+        <h5>on-select-none</h5> 
         <p>
             A $scope function to call when "select none" button is clicked.
             You need to define this function in your controller.
@@ -334,7 +334,7 @@
             <span class="inlineTitle">Example</span>: <code>&lt;div isteven-multi-select ... on-select-none="funcSelectNone()"&gt;&lt;/div&gt;</code>.              
         </p>
 
-        <h5>on-reset</h5> <span class="label label-warning">New! v3.0.0</span>
+        <h5>on-reset</h5> 
         <p>
             A $scope function to call when "reset" button is clicked.
             You need to define this function in your controller.
@@ -346,7 +346,7 @@
             <span class="inlineTitle">Example</span>: <code>&lt;div isteven-multi-select ... on-reset="funcReset()"&gt;&lt;/div&gt;</code>.              
         </p>
 
-        <h5>on-clear</h5> <span class="label label-warning">New! v3.0.0</span>
+        <h5>on-clear</h5> 
         <p>
             A $scope function to call when the "x" button in filter field is clicked.
             You need to define this function in your controller.
@@ -358,7 +358,7 @@
             <span class="inlineTitle">Example</span>: <code>&lt;div isteven-multi-select ... on-clear="funcClear()"&gt;&lt;/div&gt;</code>.              
         </p>
 
-        <h5>on-search-change</h5> <span class="label label-warning">New! v3.0.0</span>
+        <h5>on-search-change</h5>
         <p>
             A $scope function to call when you type in the search field.
             You need to define this function in your controller.
@@ -370,6 +370,16 @@
             <span class="inlineTitle">Example</span>: <code>&lt;div isteven-multi-select ... on-filter-change="funcFilterChange( data )"&gt;&lt;/div&gt;</code>.              
         </p>
 
+        <h5>output-properties</h5> <span class="label label-warning">New! v4.0.0</span>
+        <p>
+            Set what model properties you want to have in your output-model
+        </p>
+        <p>
+            <span class="inlineTitle">Type</span>: String. Separate multiple values by space.<br />
+            <span class="inlineTitle">Default value</span>: N/A<br />
+            <span class="inlineTitle">Example</span>: <code>&lt;div isteven-multi-select ... output-properties="firstName pic selected"&gt;&lt;/div&gt;</code>
+        </p>
+
         </span>
     </div>
 </div>
diff --git a/doc/views/demo-callbacks.htm b/doc/views/demo-callbacks.htm
index ade9ac1..cd7ce34 100644
--- a/doc/views/demo-callbacks.htm
+++ b/doc/views/demo-callbacks.htm
@@ -68,9 +68,9 @@
                 <tr class="hljs-tag" ng-repeat="row in modernBrowsers" >
                     <td>&nbsp;</td>
                     <td>{</td>
-                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">{{removeHost(row.icon)}}</span>,</td>
-                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">{{row.name}}</span>,</td>
-                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">{{row.maker}}</span>,</td>
+                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">"{{removeHost(row.icon)}}"</span>,</td>
+                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">"{{row.name}}"</span>,</td>
+                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">"{{row.maker}}"</span>,</td>
                     <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td>
                     <td>}<span ng-if="$index < modernWebBrowsers.length - 1">,</span></td>
                 </tr>
@@ -135,9 +135,9 @@ $scope.fSearchChange = function( data ) {
                 <tr class="hljs-tag" ng-repeat="row in outputBrowsers" >
                     <td>&nbsp;</td>
                     <td>{</td>
-                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">{{removeHost(row.icon)}}</span>,</td>
-                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">{{row.name}}</span>,</td>
-                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">{{row.maker}}</span>,</td>
+                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">"{{removeHost(row.icon)}}"</span>,</td>
+                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">"{{row.name}}"</span>,</td>
+                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">"{{row.maker}}</span>,</td>
                     <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td>
                     <td>}<span ng-if="$index < outputBrowsers.length - 1">,</span></td>
                 </tr>
diff --git a/doc/views/demo-disabling-enabling.htm b/doc/views/demo-disabling-enabling.htm
index 737de31..73fb0a9 100644
--- a/doc/views/demo-disabling-enabling.htm
+++ b/doc/views/demo-disabling-enabling.htm
@@ -18,7 +18,7 @@
             button-label="icon name"        
             item-label="icon name maker"        
             tick-property="ticked"        
-            
+            helper-elements="all"            
             disable-property="disabled"
             is-disabled="disableDir"
             >
@@ -76,9 +76,9 @@
                 <tr class="hljs-tag" ng-repeat="row in modernBrowsers" >
                     <td>&nbsp;</td>
                     <td>{</td>
-                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">{{removeHost(row.icon)}}</span>,</td>
-                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">{{row.name}}</span>,</td>
-                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">{{row.maker}}</span>,</td>
+                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">"{{removeHost(row.icon)}}"</span>,</td>
+                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">"{{row.name}}"</span>,</td>
+                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">"{{row.maker}}"</span>,</td>
                     <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td>
                     <td>}<span ng-if="$index < modernWebBrowsers.length - 1">,</span></td>
                 </tr>
@@ -105,9 +105,9 @@
                 <tr class="hljs-tag" ng-repeat="row in outputBrowsers" >
                     <td>&nbsp;</td>
                     <td>{</td>
-                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">{{removeHost(row.icon)}}</span>,</td>
-                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">{{row.name}}</span>,</td>
-                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">{{row.maker}}</span>,</td>
+                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">"{{removeHost(row.icon)}}"</span>,</td>
+                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">"{{row.name}}"</span>,</td>
+                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">"{{row.maker}}"</span>,</td>
                     <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td>
                     <td>}<span ng-if="$index < modernWebBrowsers.length - 1">,</span></td>
                 </tr>
diff --git a/doc/views/demo-dynamic-update.htm b/doc/views/demo-dynamic-update.htm
index 4a33fdb..baf1713 100644
--- a/doc/views/demo-dynamic-update.htm
+++ b/doc/views/demo-dynamic-update.htm
@@ -74,9 +74,9 @@
                             <tr class="hljs-tag" ng-repeat="row in dynamicData" >
                                 <td>&nbsp;</td>
                                 <td>{</td>
-                                <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">{{removeHost(row.icon)}}</span>,</td>
-                                <td><span class="hljs-attribute">name</span>: <span class="hljs-value">{{row.name}}</span>,</td>
-                                <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">{{row.maker}}</span>,</td>
+                                <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">"{{removeHost(row.icon)}}"</span>,</td>
+                                <td><span class="hljs-attribute">name</span>: <span class="hljs-value">"{{row.name}}"</span>,</td>
+                                <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">"{{row.maker}}"</span>,</td>
                                 <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td>
                                 <td>}<span ng-if="$index < modernBrowsers.length - 1">,</span></td>
                             </tr>
@@ -90,9 +90,9 @@
                             <tr class="hljs-tag" ng-repeat="row in oldBrowsers" >
                                 <td>&nbsp;</td>
                                 <td>{</td>
-                                <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">{{removeHost(row.icon)}}</span>,</td>
-                                <td><span class="hljs-attribute">name</span>: <span class="hljs-value">{{row.name}}</span>,</td>
-                                <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">{{row.maker}}</span>,</td>
+                                <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">"{{removeHost(row.icon)}}"</span>,</td>
+                                <td><span class="hljs-attribute">name</span>: <span class="hljs-value">"{{row.name}}"</span>,</td>
+                                <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">"{{row.maker}}"</span>,</td>
                                 <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td>
                                 <td>}<span ng-if="$index < oldBrowsers.length - 1">,</span></td>
                             </tr>
@@ -133,9 +133,9 @@ $scope.switchSource( 'modernBrowsers' );</code></pre>
                 <tr class="hljs-tag" ng-repeat="row in outputBrowsers" >
                     <td>&nbsp;</td>
                     <td>{</td>
-                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">{{removeHost(row.icon)}}</span>,</td>
-                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">{{row.name}}</span>,</td>
-                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">{{row.maker}}</span>,</td>
+                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">"{{removeHost(row.icon)}}"</span>,</td>
+                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">"{{row.name}}"</span>,</td>
+                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">"{{row.maker}}"</span>,</td>
                     <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td>
                     <td>}<span ng-if="$index < modernWebBrowsers.length - 1">,</span></td>
                 </tr>
diff --git a/doc/views/demo-grouping.htm b/doc/views/demo-grouping.htm
index 14764a8..0ae25b7 100644
--- a/doc/views/demo-grouping.htm
+++ b/doc/views/demo-grouping.htm
@@ -171,9 +171,9 @@ Now, in your controller, grouping is made by enclosing some rows of your input-m
                 <tr class="hljs-tag" ng-repeat="row in outputBrowsers1" >
                     <td>&nbsp;</td>
                     <td>{</td>
-                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">{{removeHost(row.icon)}}</span>,</td>
-                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">{{row.name}}</span>,</td>
-                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">{{row.maker}}</span>,</td>
+                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">"{{removeHost(row.icon)}}"</span>,</td>
+                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">"{{row.name}}"</span>,</td>
+                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">"{{row.maker}}"</span>,</td>
                     <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td>
                     <td>}<span ng-if="$index < outputBrowsers1.length - 1">,</span></td>
                 </tr>
diff --git a/doc/views/demo-helper-elements.htm b/doc/views/demo-helper-elements.htm
new file mode 100644
index 0000000..c2e96cf
--- /dev/null
+++ b/doc/views/demo-helper-elements.htm
@@ -0,0 +1,116 @@
+<div class="row">
+    <div class="col-sm-12">
+
+        <h3 class="pageHeading">Demo > Helper Elements</h3>        
+
+        <p>
+            You can define which helper elements to be displayed by using attribute <code>helper-elements</code>, such as:            
+        </p>
+        <div
+            isteven-multi-select 
+            input-model="modernBrowsers" 
+            output-model="outputBrowsers"
+            button-label="icon name"        
+            item-label="icon name maker"        
+            tick-property="ticked"  
+            helper-elements="all filter"
+            >
+        </div>          
+        
+        <p>&nbsp;</p>
+        <div role="tabpanel">
+
+          <!-- Nav tabs -->
+          <ul class="nav nav-tabs" role="tablist">
+            <li role="presentation" class="active"><a data-target="#view" aria-controls="home" role="tab" data-toggle="tab">View</a></li>
+            <li role="presentation"><a data-target="#controller" aria-controls="profile" role="tab" data-toggle="tab">Controller</a></li>
+          </ul>
+
+          <!-- Tab panes -->
+          <div class="tab-content">
+            <div role="tabpanel" class="tab-pane active" id="view">
+                <p>Define your directive:</p>
+                <pre><code>&lt;div
+    isteven-multi-select
+    input-model="modernBrowsers"
+    output-model="outputBrowsers"
+    button-label="icon name"
+    item-label="icon name maker"
+    tick-property="ticked"
+    ...
+    helper-elements="all filter"
+&gt;
+&lt;/div&gt;</code></pre>
+            </div>
+            <div role="tabpanel" class="tab-pane" id="controller">
+                <p>Define your input-model:</p>
+        <div class="fauxCode hljs xml">
+            $scope.modernBrowsers = [
+            <table>
+                <tr class="hljs-tag" ng-repeat="row in modernBrowsers" >
+                    <td>&nbsp;</td>
+                    <td>{</td>
+                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">"{{removeHost(row.icon)}}"</span>,</td>
+                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">"{{row.name}}"</span>,</td>
+                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">"{{row.maker}}"</span>,</td>
+                    <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td>
+                    <td>}<span ng-if="$index < modernWebBrowsers.length - 1">,</span></td>
+                </tr>
+            </table>
+            ];
+        </div>  
+            </div>
+          </div>
+
+        </div>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-sm-12">              
+        <h5>Output model</h5>
+        <p>
+            Look at the <code>output-model</code> below to see the values getting updated 
+            as you select / deselect an item in the directive. Icons in the objects are actually full HTML <code>img</code> tag, shortened for simplicity. 
+        </p>
+        <div class="fauxCode hljs xml">
+            $scope.outputBrowsers = [
+            <table>
+                <tr class="hljs-tag" ng-repeat="row in outputBrowsers" >
+                    <td>&nbsp;</td>
+                    <td>{</td>
+                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">"{{removeHost(row.icon)}}"</span>,</td>
+                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">"{{row.name}}"</span>,</td>
+                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">"{{row.maker}}"</span>,</td>
+                    <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td>
+                    <td>}<span ng-if="$index < modernWebBrowsers.length - 1">,</span></td>
+                </tr>
+            </table>
+            ];
+        </div>                
+
+        <h5>Other examples</h5>
+        <p>
+            The attribute accepts a combination of "all none filter reset", in space separated string. Example:
+            <ul>
+                <li><code>helper-elements="filter"</code>: will display the search (filter) field only</li>
+                <li><code>helper-elements="all none"</code>: will display the "Select all" and "Select none" buttons</li>
+                <li><code>helper-elements=""</code>: will display no helper elements at all</li>
+            </ul>            
+        </p>
+        <br />
+        <p>
+            <span class="label label-primary">Note</span> 
+            When the directive is disabled (using <code>is-disabled</code> property), the helper elements will be disabled except the filter field. 
+            The purpose is to allow you to search and see the selection state even when the directive is disabled.
+        </p>
+    </div>        
+</div>
+
+<script>    
+    $(document).ready(function() {
+      $('pre code').each(function(i, block) {
+        hljs.highlightBlock(block);
+      });
+    });
+</script>
diff --git a/doc/views/demo-horizontal-layout.htm b/doc/views/demo-horizontal-layout.htm
index 8b58933..da38770 100644
--- a/doc/views/demo-horizontal-layout.htm
+++ b/doc/views/demo-horizontal-layout.htm
@@ -56,9 +56,9 @@
                 <tr class="hljs-tag" ng-repeat="row in modernBrowsers" >
                     <td>&nbsp;</td>
                     <td>{</td>
-                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">{{removeHost(row.icon)}}</span>,</td>
-                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">{{row.name}}</span>,</td>
-                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">{{row.maker}}</span>,</td>
+                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">"{{removeHost(row.icon)}}"</span>,</td>
+                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">"{{row.name}}"</span>,</td>
+                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">"{{row.maker}}"</span>,</td>
                     <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td>
                     <td>}<span ng-if="$index < modernWebBrowsers.length - 1">,</span></td>
                 </tr>
@@ -85,9 +85,9 @@
                 <tr class="hljs-tag" ng-repeat="row in outputBrowsers" >
                     <td>&nbsp;</td>
                     <td>{</td>
-                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">{{removeHost(row.icon)}}</span>,</td>
-                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">{{row.name}}</span>,</td>
-                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">{{row.maker}}</span>,</td>
+                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">"{removeHost(row.icon)}}"</span>,</td>
+                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">"{{row.name}}"</span>,</td>
+                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">"{{row.maker}}"</span>,</td>
                     <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td>
                     <td>}<span ng-if="$index < modernWebBrowsers.length - 1">,</span></td>
                 </tr>
diff --git a/doc/views/demo-minimum.htm b/doc/views/demo-minimum.htm
index 752ae5b..8f0d75d 100644
--- a/doc/views/demo-minimum.htm
+++ b/doc/views/demo-minimum.htm
@@ -53,9 +53,9 @@
                 <tr class="hljs-tag" ng-repeat="row in modernBrowsers" >
                     <td>&nbsp;</td>
                     <td>{</td>
-                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">{{removeHost(row.icon)}}</span>,</td>
-                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">{{row.name}}</span>,</td>
-                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">{{row.maker}}</span>,</td>
+                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">"{{removeHost(row.icon)}}"</span>,</td>
+                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">"{{row.name}}"</span>,</td>
+                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">"{{row.maker}}"</span>,</td>
                     <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td>
                     <td>}<span ng-if="$index < modernWebBrowsers.length - 1">,</span></td>
                 </tr>
@@ -82,9 +82,9 @@
                 <tr class="hljs-tag" ng-repeat="row in outputBrowsers" >
                     <td>&nbsp;</td>
                     <td>{</td>
-                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">{{removeHost(row.icon)}}</span>,</td>
-                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">{{row.name}}</span>,</td>
-                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">{{row.maker}}</span>,</td>
+                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">"{{removeHost(row.icon)}}"</span>,</td>
+                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">"{{row.name}}"</span>,</td>
+                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">"{{row.maker}}"</span>,</td>
                     <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td>
                     <td>}<span ng-if="$index < modernWebBrowsers.length - 1">,</span></td>
                 </tr>
diff --git a/doc/views/demo-output-properties.htm b/doc/views/demo-output-properties.htm
new file mode 100644
index 0000000..7e59bf2
--- /dev/null
+++ b/doc/views/demo-output-properties.htm
@@ -0,0 +1,101 @@
+<div class="row">
+    <div class="col-sm-12">
+
+        <h3 class="pageHeading">Demo > Output Properties</h3>        
+
+        <p>
+            You can choose which properties you want to have in your output-model.
+        </p>
+        
+        <br />
+        <div
+            isteven-multi-select 
+            input-model="modernBrowsers" 
+            output-model="outputBrowsers"
+            button-label="icon name"        
+            item-label="icon name maker"        
+            tick-property="ticked"  
+            output-properties="name ticked"
+            >
+        </div>  
+
+        <p>&nbsp;</p>
+
+        <div role="tabpanel">
+
+          <!-- Nav tabs -->
+          <ul class="nav nav-tabs" role="tablist">
+            <li role="presentation" class="active"><a data-target="#view" aria-controls="home" role="tab" data-toggle="tab">View</a></li>
+            <li role="presentation"><a data-target="#controller" aria-controls="profile" role="tab" data-toggle="tab">Controller</a></li>
+          </ul>
+
+          <!-- Tab panes -->
+          <div class="tab-content">
+            <div role="tabpanel" class="tab-pane active" id="view">
+                <p>Define your directive:</p>
+                <pre><code>&lt;div
+    isteven-multi-select
+    input-model="modernBrowsers"
+    output-model="outputBrowsers"
+    button-label="icon name"
+    item-label="icon name maker"
+    tick-property="ticked"
+    ...
+    output-properties="name ticked"
+&gt;
+&lt;/div&gt;</code></pre>
+            </div>
+            <div role="tabpanel" class="tab-pane" id="controller">
+                <p>Define your input-model:</p>
+        <div class="fauxCode hljs xml">
+            $scope.modernBrowsers = [
+            <table>
+                <tr class="hljs-tag" ng-repeat="row in modernBrowsers" >
+                    <td>&nbsp;</td>
+                    <td>{</td>
+                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">"{{removeHost(row.icon)}}"</span>,</td>
+                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">"{{row.name}}"</span>,</td>
+                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">"{{row.maker}}"</span>,</td>
+                    <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td>
+                    <td>}<span ng-if="$index < modernWebBrowsers.length - 1">,</span></td>
+                </tr>
+            </table>
+            ];
+        </div>  
+            </div>
+          </div>
+
+        </div>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-sm-12">              
+        <h5>Output model</h5>
+        <p>
+            Look at the <code>output-model</code> below to see the values getting updated 
+            as you select / deselect an item in the directive. Icons in the objects are actually full HTML <code>img</code> tag, shortened for simplicity. 
+        </p>
+        <div class="fauxCode hljs xml">
+            $scope.outputBrowsers = [
+            <table>
+                <tr class="hljs-tag" ng-repeat="row in outputBrowsers" >
+                    <td>&nbsp;</td>
+                    <td>{</td>
+                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">"{{row.name}}"</span>,</td>
+                    <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td>
+                    <td>}<span ng-if="$index < modernWebBrowsers.length - 1">,</span></td>
+                </tr>
+            </table>
+            ];
+        </div>                
+    </div>        
+</div>
+
+<script>    
+    $(document).ready(function() {
+      $('pre code').each(function(i, block) {
+        hljs.highlightBlock(block);
+      });
+    });
+</script>
diff --git a/doc/views/demo-single-selection-mode.htm b/doc/views/demo-single-selection-mode.htm
index af0858d..67a7a18 100644
--- a/doc/views/demo-single-selection-mode.htm
+++ b/doc/views/demo-single-selection-mode.htm
@@ -18,9 +18,9 @@
             output-model="outputBrowsers"
             button-label="icon name"        
             item-label="icon name maker"        
-            tick-property="ticked"                
-            helper-elements=""
+            tick-property="ticked"                            
             selection-mode="single"
+            helper-elements=""
             >
         </div>  
 
@@ -58,9 +58,9 @@
                 <tr class="hljs-tag" ng-repeat="row in modernBrowsers" >
                     <td>&nbsp;</td>
                     <td>{</td>
-                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">{{removeHost(row.icon)}}</span>,</td>
-                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">{{row.name}}</span>,</td>
-                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">{{row.maker}}</span>,</td>
+                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">"{{removeHost(row.icon)}}"</span>,</td>
+                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">"{{row.name}}"</span>,</td>
+                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">"{{row.maker}}"</span>,</td>
                     <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td>
                     <td>}<span ng-if="$index < modernWebBrowsers.length - 1">,</span></td>
                 </tr>
@@ -87,9 +87,9 @@
                 <tr class="hljs-tag" ng-repeat="row in outputBrowsers" >
                     <td>&nbsp;</td>
                     <td>{</td>
-                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">{{removeHost(row.icon)}}</span>,</td>
-                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">{{row.name}}</span>,</td>
-                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">{{row.maker}}</span>,</td>
+                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">"{{removeHost(row.icon)}}"</span>,</td>
+                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">"{{row.name}}"</span>,</td>
+                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">"{{row.maker}}"</span>,</td>
                     <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td>
                     <td>}<span ng-if="$index < modernWebBrowsers.length - 1">,</span></td>
                 </tr>
diff --git a/doc/views/main.htm b/doc/views/main.htm
index baa3912..9a740bf 100644
--- a/doc/views/main.htm
+++ b/doc/views/main.htm
@@ -16,7 +16,7 @@
             output-model="anyOutput"
             button-label="icon name"        
             item-label="icon name maker"        
-            tick-property="ticked"  
+            tick-property="ticked"                          
         >        
         </div>        
         <h5>Features</h5>