New functionalities! Use HTML tags and granular control

5 files changed, 111 insertions, 397 deletions

diff --git a/README.md b/README.md
index 81af2de..0d9087e 100644
--- a/README.md
+++ b/README.md
@@ -1,120 +1,38 @@
-Angular Multi Select ** Updating in progress. Do not download **
+Angular Multi Select
 ====================
-Angular Multi Select is an AngularJS directive which creates a dropdown button with multiple selections. 
+An AngularJS directive which creates a dropdown button with multiple or single selections. 
+Allows you to customize your labels and use HTML tags in the data. Fully configurable through element attributes and CSS.
 
-<br />![Screenshot](https://raw.githubusercontent.com/isteven/angular-multi-select/master/screenshot.jpg)
+<br />![Screenshot](https://raw.githubusercontent.com/isteven/angular-multi-select/master/screenshot.png)
 
-Demo: http://jsfiddle.net/Rg2pY/ or download all the files into a same folder and open multiselect.htm.
-
-Features
---
-  - Use CSS & HTML tags 
-  - Reset selections to original state
-  - Directly updates the input model
-  - Load new input model on the fly
-  - Configurable, such as:
-    - Set which model property to bind to the checkbox status
-    - Set orientation of checkboxes
-    - Enable / disable checkboxes
-    - Set maximum number of items to be displayed on the button label
-  - Utilizes AngularJS filter
-  - Responsive to some extent
-  
-Usage
---
-    <div
-        multi-select 
-        input-model="input_list"          
-        button-label="firstName"         
-        item-label="firstName lastName" 
-        tick-property="selected"  
-        output-model="output_list"
-        orientation="vertical" 
-        max-labels="4"
-        is-disabled="multi_select_state" 
-        directive-id="ms1"
-        >
-    </div>
-    
-        // or this one, but not really tested, so be careful with browser compatibility.
-
-    <multi-select 
-        ...
-        ... >
-    </multi-select> 
-
-Attributes / Options
+Demo & How-tos
 --
-Below are the available attributes to configure the multi-select directive:
-
-##### input-model (REQUIRED)
-$scope variable. Array of objects. 
-<br />Example:
-<br />$scope.inputList = [    
-&nbsp;&nbsp;&nbsp;&nbsp;{ id: 1, firstName: "Peter",    lastName: "Parker",     selected: false },
-<br />&nbsp;&nbsp;&nbsp;&nbsp;{ id: 2, firstName: "Mary",     lastName: "Jane",       selected: false },
-<br />&nbsp;&nbsp;&nbsp;&nbsp;{ id: 3, firstName: "Bruce",    lastName: "Wayne",      selected: true },
-<br />&nbsp;&nbsp;&nbsp;&nbsp;{ id: 4, firstName: "David",    lastName: "Banner",     selected: false },
-<br />&nbsp;&nbsp;&nbsp;&nbsp;{ id: 5, firstName: "Natalia",  lastName: "Romanova",   selected: false },
-<br />&nbsp;&nbsp;&nbsp;&nbsp;{ id: 6, firstName: "Clark",    lastName: "Kent",       selected: true }      
-];    
-- **IMPORTANT**: This directive updates the $scope variable (input-model) directly, therefore you cannot use the same $scope variable for multiple multi-select directives. You need to copy the input variable to a new one and use it on the second multi-select, and so on.
-
-##### button-label (REQUIRED)
-input-model property that you want to display on the button. Separate multiple values by space. 
-<br />Example: 
-item-label="firstName"          
-
-##### item-label (REQUIRED)
-input-model property that you want to display on the checkboxes. Separate multiple values by space. 
-<br />Example: 
-item-label="firstName lastName"          
-
-##### tick-property (REQUIRED)
-input-model property with a boolean value that represent the state of a checkbox. 
-<br />For example: 
- - tick-property is "selected"   
-    - if selected === true, checkbox will be ticked. 
-    - If selected === false, checkbox will not be ticked.
- - tick-property is "isOn"       
-   - if isOn === true, checkbox will be ticked. 
-   - If isOn === false, checkbox will not be ticked.
-
-##### output-model
-A $scope variable. If specified, will list all the selected checkboxes model.
-
-##### orientation ( "vertical" | "horizontal" )
-Orientation of the list of checkboxes. If not specified, the default will be "vertical".
-
-##### max-labels
-Maximum number of items that will be displayed in the dropdown button. If not specified, will display all selected items. 
-<br />Example: "1"
-<br />- Using the input-model above, then button will display: "Bruce Wayne, ... [ Total: 2 ]"
-
-##### is-disabled 
-Expression to be evaluated. Will disable or enable the checkboxes. 
-<br />If not specified, the default will be "false". 
-<br />(Similar with ng-disabled, see http://docs.angularjs.org/api/ng/directive/ngDisabled)
-
-##### directive-id
-Name or id for your directive. There are some validations and error messages in the directive, and this id will help to check which directive displays error message (in case you use more than one directive in one page).
+Go to http://isteven.github.io/angular-multi-select
 
 Note
 --
-I use HTML entity 9662 for the caret (downward pointing arrow). If you want a better looking arrow, you can use the .caret class in the CSS file. Just create a span using that .caret. Do note that this span won't toggle the dropdown. You need to click outside the span.
-
-Requirements
---
-Created using AngularJS v1.2.15. Other versions may or may not work.
-
-Browser Compatibility
---
-Tested on:
-- Opera 12.16 (Yes, I love Opera browser! Download yours here: http://www.opera.com/)
-- IE8 (IE8 is the default browser in the company I work for)
-- Firefox 27
-- Google Chrome 33
+I'm a Github newbie so pardon me if you experience weird commit / forking sequence =)
+I'm all ears for new development ideas. Just open an issue in https://github.com/isteven/angular-multi-select. 
 
 Licence
 --
 Released under the MIT license. 
+
+Copyright (c) 2014 Ignatius Steven (https://github.com/isteven)
+Permission is hereby granted, free of charge, to any person obtaining a copy 
+of this software and associated documentation files (the "Software"), to deal 
+in the Software without restriction, including without limitation the rights 
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 
+copies of the Software, and to permit persons to whom the Software is 
+furnished to do so, subject to the following conditions: 
+
+The above copyright notice and this permission notice shall be included in all 
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 
+SOFTWARE.
diff --git a/angular-multi-select.css b/angular-multi-select.css
index 88919ba..82f2932 100644
--- a/angular-multi-select.css
+++ b/angular-multi-select.css
@@ -5,26 +5,29 @@
     display: inline-block;
 }
 
+/* multi select button style */
 .multiSelect .button {
     display: block;
     position: relative;
     margin:0 auto;       
     text-align: center;
     cursor: pointer;
-    border: 1px solid #999;
+    border: 1px solid #c3c3c3;
     padding: 6px 12px;
     font-size: 14px;
     line-height: 1.4;
-    border-radius: 3px;
-    -webkit-user-select: none;
+    border-radius: 2px;
+    color: #333;      
+    background-color: #fff;
+   -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     -o-user-select: none;
-    user-select: none;
-    color: #333;      
-    background-color: #fff;
+    user-select: none; 
+    white-space:normal;
 }
 
+/* helper buttons style (select all, none, reset, clear filter); */
 .multiSelect .helperButton {
     display: inline-block;
     text-align: center;
@@ -35,11 +38,6 @@
     font-size: 14px;
     line-height: 1;
     border-radius: 2px;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -o-user-select: none;
-    user-select: none;
     color: #666;    
 }
 
@@ -58,6 +56,7 @@
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
     background-clip: padding-box; 
     padding: 15px;
+    min-width:270px;
 }
 
 .multiSelect .caret {
@@ -75,7 +74,7 @@
 .multiSelect.multiSelectItem {
     display: block;
     min-height: 30px;    
-    color: #666;   
+    color: #777;   
 }
 
 .multiSelect .vertical {
@@ -86,37 +85,37 @@
     float: left;
 }
 
-.multiSelect .col {
-    display: table-cell;
+.multiSelect .acol {
+    display: table-cell;    
+    line-height: 1.4;  
     min-width: 14px;
-    line-height: 1.4;       
 }
 
-.multiSelect img {
-    vertical-align: middle;
-    margin-bottom:4px;
-}
 
 label.multiSelect span {
-    margin-right: 5px;    
+    white-space:nowrap;
+    margin: 0;
+    padding: 0;
+    display: inline-block;
+   -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;    
 }
 
 label.multiSelect span:hover{
     cursor: pointer;    
-    color: #000;
+    color: #333;
 }
 
+/* hide the checkbox away */
 .multiSelect .checkbox {
     position: absolute;
     left: -9999px;
     cursor: pointer;
 }
 
-.multiSelect .checkboxSelected {
-    color: #333;
-    font-weight: bold;
-}
-
 .multiSelect .show {
     display: inline-block;
 }
@@ -133,13 +132,22 @@ label.multiSelect span:hover{
     margin-left: 1px;
 }
 
-.multiSelect.disabled {
-    color: #999;
-    cursor: not-allowed;
+/* for checkboxes currently selected */
+.multiSelect .checkboxSelected {
+    color: #000;
+    text-shadow: 1px 0px #eee;
 }
 
-.multiSelect.disabled:hover {
+/* checkboxes currently disabled */
+.multiSelect.disabled, .multiSelect.disabled:hover {
+    color: #ccc;
     cursor: not-allowed;
-    color: #999;
 }
 
+/* If you use images in button / checkbox label, you might want to change the image style here.. */
+.multiSelect img {
+    vertical-align: middle;
+    margin-bottom:2px;
+    height: 22px;
+    width:22px;
+}
diff --git a/angular-multi-select.js b/angular-multi-select.js
index 897a596..f7e0d4a 100644
--- a/angular-multi-select.js
+++ b/angular-multi-select.js
@@ -40,12 +40,14 @@ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$sce', fu
             true,
 
         scope: 
-        {
+        {            
             inputModel      : '=',
             outputModel     : '=',
             buttonLabel     : '@',
+            selectionMode   : '@',
             itemLabel       : '@',
             tickProperty    : '@',
+            disableProperty : '@',
             orientation     : '@',
             maxLabels       : '@',
             isDisabled      : '=',
@@ -56,11 +58,11 @@ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$sce', fu
             '<span class="multiSelect inlineBlock">' +
                 '<button type="button" class="multiSelect button multiSelectButton" ng-click="toggleCheckboxes( $event ); refreshSelectedItems();" ng-bind-html="varButtonLabel">' +
                 '</button>' +                
-                '<div class="multiSelect checkboxLayer hide" style="{{layerStyle}}">' +
+                '<div class="multiSelect checkboxLayer hide">' +
                     '<div class="multiSelect line">' +
-                        '<span ng-if="!isDisabled">Select: &nbsp;&nbsp;</span>' + 
-                            '<button type="button" ng-click="select( \'all\' )"    class="multiSelect helperButton" ng-if="!isDisabled">All</button> ' +
-                            '<button type="button" ng-click="select( \'none\' )"   class="multiSelect helperButton" ng-if="!isDisabled">None</button> ' + 
+                        '<span ng-if="!isDisabled">Select: &nbsp;</span>' + 
+                            '<button type="button" ng-click="select( \'all\' )"    class="multiSelect helperButton" ng-if="!isDisabled && selectionMode.toUpperCase() != \'SINGLE\'">All</button> ' +
+                            '<button type="button" ng-click="select( \'none\' )"   class="multiSelect helperButton" ng-if="!isDisabled && selectionMode.toUpperCase() != \'SINGLE\'">None</button> ' + 
                             '<button type="button" ng-click="select( \'reset\' )"  class="multiSelect helperButton" ng-if="!isDisabled">Reset</button>' +
                     '</div>' +
                     '<div class="multiSelect line">' + 
@@ -68,13 +70,13 @@ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$sce', fu
                             '&nbsp;<button type="button" class="multiSelect helperButton" ng-click="labelFilter=\'\'">Clear</button>' +
                     '</div>' +
                     '<div ng-repeat="item in inputModel | filter:labelFilter" ng-class="orientation" class="multiSelect multiSelectItem">' +
-                        '<div class="multiSelect col">' +
-                            '<span class="multiSelect" ng-if="item[ tickProperty ]">&#10004;</span>' +
+                        '<div class="multiSelect acol">' +
+                            '<div class="multiSelect" ng-show="item[ tickProperty ]">&#10004;</div>' +
                         '</div>' +
-                        '<div class="multiSelect col">' +
+                        '<div class="multiSelect acol">' +
                             '<label class="multiSelect" ng-class="{checkboxSelected:item[ tickProperty ]}">' +
-                                '<input class="multiSelect checkbox" type="checkbox" ng-disabled="isDisabled" ng-checked="item[ tickProperty ]" ng-click="syncItems( item )" />' +
-                                    '<span class="multiSelect" ng-class="{disabled:isDisabled}" ng-bind-html="writeLabel( item, \'itemLabel\' )"></span>' +
+                                '<input class="multiSelect checkbox" type="checkbox" ng-disabled="itemIsDisabled( item )" ng-checked="item[ tickProperty ]" ng-click="syncItems( item )" />' +
+                                    '<span class="multiSelect" ng-class="{disabled:itemIsDisabled( item )}" ng-bind-html="writeLabel( item, \'itemLabel\' )"></span>' +
                             '</label>&nbsp;&nbsp;' +
                         '</div>' +
                     '</div>' +
@@ -85,13 +87,23 @@ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$sce', fu
             
             $scope.selectedItems    = [];    
             $scope.backUp           = [];
-            $scope.layerStyle       = '';
             $scope.varButtonLabel   = '';            
 
             // Checkbox is ticked
             $scope.syncItems = function( item ) {                                                                
-                index = $scope.inputModel.indexOf( item );                
-                $scope.inputModel[ index ][ $scope.tickProperty ] = !$scope.inputModel[ index ][ $scope.tickProperty ];
+                index       = $scope.inputModel.indexOf( item );                
+                tempState   = $scope.inputModel[ index ][ $scope.tickProperty ];
+                $scope.inputModel[ index ][ $scope.tickProperty ] = !tempState;
+                
+                // If it's single selection mode
+                if ( $scope.selectionMode.toUpperCase() === 'SINGLE' ) {
+                    for( i=0; i<$scope.inputModel.length;i++) {
+                        if ( i !== index ) {
+                            $scope.inputModel[ i ][ $scope.tickProperty ] = tempState;
+                        }
+                    }
+                }
+
                 $scope.refreshSelectedItems();                   
             }     
 
@@ -149,6 +161,24 @@ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$sce', fu
                 $scope.varButtonLabel = $sce.trustAsHtml( $scope.varButtonLabel + '&nbsp;&nbsp;&#9662;' );
             }
 
+            // Check if a checkbox is disabled or enabled. It will check the granular control (disableProperty) and global control (isDisabled)
+            // Take note that the granular control has higher priority.
+            $scope.itemIsDisabled = function( item ) {
+                
+                if ( item[ $scope.disableProperty ] === true ) {                    
+                    return true;
+                }
+                else {                    
+                    if ( $scope.isDisabled === true ) {
+                        return true;
+                    }
+                    else {
+                        return false;
+                    }
+                }
+                
+            }
+
             // A simple function to parse the item label settings
             $scope.writeLabel = function( item, type ) {
                 var label = '';
@@ -204,14 +234,14 @@ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$sce', fu
                 switch( type.toUpperCase() ) {
                     case 'ALL':
                         angular.forEach( $scope.inputModel, function( value, key ) {
-                            if ( typeof value !== 'undefined' ) {                        
+                            if ( typeof value !== 'undefined' && value[ $scope.disableProperty ] !== true ) {                        
                                 value[ $scope.tickProperty ] = true;
                             }
                         });                                        
                         break;
                     case 'NONE':
                         angular.forEach( $scope.inputModel, function( value, key ) {
-                            if ( typeof value !== 'undefined' ) {                        
+                            if ( typeof value !== 'undefined' && value[ $scope.disableProperty ] !== true ) {                        
                                 value[ $scope.tickProperty ] = false;
                             }
                         });                
diff --git a/multiselect.htm b/multiselect.htm
deleted file mode 100644
index 5d07c8a..0000000
--- a/multiselect.htm
+++ /dev/null
@@ -1,242 +0,0 @@
-<!doctype html>
-<html lang="en" ng-app="myApp" id="ng-app">
-<head>
-    <title>Angular JS Multi-Select</title>    
-    <!-- Angular JS -->
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
-    <!-- multi select directive -->
-    <script src="angular-multi-select.js"></script>                 
-    <!-- css -->
-    <link rel="stylesheet" href="angular-multi-select.css">                
-    <meta http-equiv="X-UA-Compatible" content="IE=Edge">    
-    <style>
-    body {
-        font-family: 'Arial';
-        font-size: 14px;
-        background-color: #fff;
-        padding: 0;
-        margin: 20px;
-    }
-    #container {
-        margin: 0px auto;
-        width: 50%;
-        background-color: #f8f8f8;
-        padding: 0px 20px 20px 20px; 
-        border: 1px solid #ddd;
-    }
-    </style>    
-</head>
-    
-<body ng-controller="main">
-    <div id="container">
-        <h1>Angular JS Multi-Select</h1>
-        * Open your browser console to see the $scope variables getting updated
-        <br />
-        <br />
-        <h3 style="width:100%;border-bottom:1px solid #ccc">Minimal</h3> 
-        <div
-            multi-select 
-            input-model="minData" 
-            button-label="firstName"        
-            item-label="firstName"        
-            tick-property="selected" 
-            >
-        </div>  
-        <br />
-
-        <h3 style="width:100%;border-bottom:1px solid #ccc">Full</h3>
-        <div 
-            multi-select 
-            input-model="fullData" 
-            output-model="resultData"
-            button-label="firstName lastName"         
-            item-label="firstName lastName" 
-            tick-property="checked" 
-            orientation="horizontal"
-            max-labels="3"     
-            directive-id="multiSelectFull"
-            >
-        </div>
-        <br />
-
-        <h3 style="width:100%;border-bottom:1px solid #ccc">Use element instead of attribute, dynamic input and state</h3>
-        <multi-select 
-            input-model="dynamicData" 
-            button-label="car"
-            item-label="car"
-            tick-property="ticked" 
-            is-disabled="dinDisabled"
-            >
-        </multi-select>
-        
-        <br /><br />
-        <button type="button" ng-click="switchSource( 'data1' )" >Load data 1</button>    
-        <button type="button" ng-click="switchSource( 'data2' )" >Load data 2</button>    
-        <button type="button" ng-click="switchSource( 'data3' )" >Load data 3</button>    
-
-        <br /><br />
-        <button type="button" ng-click="dinDisabled = !dinDisabled" >Enable / Disable</button>    
-        Is disabled: {{dinDisabled}}    
-        <br />
-
-        <h3 style="width:100%;border-bottom:1px solid #ccc">Use HTML tags</h3>
-        You can use whatever HTML tags accepted by AngularJS's $sce.trustAsHtml() method. 
-        <br /><br />
-        <multi-select 
-            input-model="webBrowsers" 
-            button-label="icon"
-            item-label="icon name"
-            tick-property="ticked" 
-            >
-        </multi-select>
-    </div>
-</body>   
-
-<script>            
-
-// Load the multi-select module
-var myApp = angular.module('myApp', [ 'multi-select' ]);
-
-// Controller
-myApp.controller( 'main' , [ '$scope' , function ($scope) {
-    
-
-    /////////////
-    //  Minimal
-    /////////////
-
-    $scope.minData = [
-        { id: 1, firstName: "Peter",    lastName: "Parker",     selected: false },
-        { id: 2, firstName: "Mary",     lastName: "Jane",       selected: false },
-        { id: 3, firstName: "Bruce",    lastName: "Wayne",      selected: true },
-        { id: 4, firstName: "David",    lastName: "Banner",     selected: false },
-        { id: 5, firstName: "Natalia",  lastName: "Romanova",   selected: false },
-        { id: 6, firstName: "Clark",    lastName: "Kent",       selected: true },
-    ];
-
-    // Open your console and watch minData changes
-    $scope.$watch( "minData" , function( newVal ) {                 
-        angular.forEach( newVal , function( value, key ) {                    
-            if ( value.selected === true ) {
-                console.log( 'minData .selected === true: ' + value.firstName + ' ' + value.lastName );
-            }
-        });
-        console.log( '--------' );
-    }, true );                
-
-
-    /////////////
-    //  Full
-    /////////////
-    
-    $scope.resultData = [];
-    
-    // Data. For the sake of testing, this time around we try to use 'checked' to hold checkbox state.
-    $scope.fullData = [
-        { id: 1, firstName: "Tom",      lastName: "Cruise",     checked: true },
-        { id: 2, firstName: "Brad",     lastName: "Pitt",       checked: false },
-        { id: 3, firstName: "Angelina", lastName: "Jolie",      checked: false },
-        { id: 4, firstName: "Scarlett", lastName: "Johansson",  checked: false },
-        { id: 5, firstName: "Gerard",   lastName: "Buttler",    checked: true },
-        { id: 6, firstName: "Leonardo", lastName: "DiCaprio",   checked: false },
-    ];
-
-    // Open your console and watch fullData changes
-    $scope.$watch( "fullData" , function( newVal ) {
-        angular.forEach( newVal , function( value, key ) {                    
-            if ( value.checked === true ) {
-               console.log( 'fullData .checked === true: ' + value.firstName + ' ' + value.lastName );
-            }
-        });
-        console.log( '--------' );         
-    }, true );         
-
-    // Open your console and watch resultData changes
-    $scope.$watch( "resultData" , function( newVal, oldVal ) {        
-        if ( $scope.resultData.length > 0 && !angular.equals( oldVal, newVal ) ) {
-            angular.forEach( newVal , function( value, key ) {                    
-                if ( value.checked === true ) {
-                   console.log( 'resultData .checked === true: ' + value.firstName + ' ' + value.lastName );
-                }
-            });
-            console.log( '--------' );
-        }
-    }, true );    
-
-
-    /////////////
-    //  Dynamic
-    /////////////    
-
-    $scope.dynamicData = [];
-    $scope.dinDisabled = false;
-
-    $scope.switchSource = function( data ) {
-        $scope.dynamicData = $scope[ data ];
-    }
-    
-    // Japanese cars
-    $scope.data1 = [
-        { car: 'Toyota',    ticked: true },
-        { car: 'Mazda',     ticked: false },
-        { car: 'Nissan',    ticked: true },
-        { car: 'Honda',     ticked: false }
-    ];
-
-    // German cars
-    $scope.data2 = [
-        { car: 'Audi',      ticked: false },
-        { car: 'BMW',       ticked: false },
-        { car: 'Mercedes',  ticked: true },
-    ];
-
-    // Italian cars
-    $scope.data3 = [
-        { car: 'Porsche'    , ticked: false },
-        { car: 'Ferrari'    , ticked: false },
-        { car: 'Fiat'       , ticked: true },        
-        { car: 'Lamborgini' , ticked: true },                
-    ];
-
-    // Open your console and watch dynamicData changes
-    $scope.$watch( "dynamicData" , function( newVal, oldVal ) {        
-        if ( !angular.equals( oldVal, newVal ) ) {
-            angular.forEach( newVal , function( value, key ) {                    
-                if ( value.ticked === true ) {
-                   console.log( 'dynamicData .ticked === true: ' + value.car );
-                }
-            });
-            console.log( '--------' ); 
-        }
-    }, true );                 
-
-    /////////////
-    // HTML tag
-    /////////////
-    
-    // Web browsers
-    $scope.webBrowsers = [
-        { icon: '<img class="multiSelect" src="https://cdn1.iconfinder.com/data/icons/fatcow/32/opera.png" />',                         name: 'Opera',              ticked: true    },
-        { icon: '<img class="multiSelect" src="https://cdn1.iconfinder.com/data/icons/fatcow/32/internet_explorer.png" />',             name: 'Internet Explorer',  ticked: false   },
-        { icon: '<img class="multiSelect" src="https://cdn1.iconfinder.com/data/icons/humano2/32x32/apps/firefox-icon.png" />',         name: 'Firefox',            ticked: true    },
-        { icon: '<img class="multiSelect" src="https://cdn1.iconfinder.com/data/icons/fatcow/32x32/safari_browser.png" />',             name: 'Safari',             ticked: false   },
-        { icon: '<img class="multiSelect" src="https://cdn1.iconfinder.com/data/icons/google_jfk_icons_by_carlosjj/32/chrome.png" />',  name: 'Chrome',             ticked: true    }    
-    ];
-
-    // Open your console and watch dynamicData changes
-    $scope.$watch( "webBrowsers" , function( newVal, oldVal ) {        
-        if ( !angular.equals( oldVal, newVal ) ) {
-            angular.forEach( newVal , function( value, key ) {                    
-                if ( value.ticked === true ) {
-                   console.log( 'webBrowsers .ticked === true: ' + value.name );
-                }
-            });
-            console.log( '--------' ); 
-        }
-    }, true );                 
-    
-
-}]);    
-
-</script>    
-</html>
diff --git a/screenshot.jpg b/screenshot.jpg
deleted file mode 100644
index eb56b57..0000000
--- a/screenshot.jpg
+++ /dev/null