amitava82 · nathantsoi · Apr 16, 2014 · Apr 16, 2014 · Apr 16, 2014 · Apr 16, 2014
diff --git a/README.md b/README.md
@@ -1,10 +1,55 @@
-angular-multiselect
-===================
+# A Native AngularJS multiselect directive
 
-Native AngularJS multiselect directive - Work in progress. Contributions welcome!
 
-Example: http://plnkr.co/edit/LPGYIf?p=preview
+#### index.html
+```html
+<!DOCTYPE html>
+<html ng-app="plunker">
+  <head>
+    <script src="app.js"></script>
+    <script src="multiselect.js"></script>
+  </head>
+  <body ng-controller="MainCtrl">
 
-License
-=======
-The MIT License
+    <multiselect multiple="true" ng-model="selectedCar" options="car.id as car.name for car in cars" />
+    <div class="well well-small">
+        {{selectedCar}}
+    </div>
+
+  </body>
+</html>
+```
+
+
+#### app.js
+```js
+var app = angular.module('plunker', ['ui.multiselect']);
+
+app.controller('MainCtrl', function($scope) {
+  $scope.cars = [{id:1, name: 'Audi'}, {id:2, name: 'BMW'}, {id:3, name: 'Honda'}];
+  $scope.selectedCar = [];
+});
+```
+
+
+#### After selecting 'Audi' and 'Honda', the model will look like:
+```
+  $scope.selectedCar = [1, 3];
+```
+
+
+#### Change options to `car.name for car in cars` for a data model like:
+```
+  $scope.selectedCar = [{id:1, name: 'Audi'}, {id:3, name: 'Honda'}];
+```
+
+#### Changing options to `car.id for car in cars` will change the options labels in the UI:
+`'Audi', 'BMW', 'Honda'` -> `'1', '2', '3'`
+
+
+## Example
+http://plnkr.co/edit/LPGYIf?p=preview
+
+## License
+
+MIT
diff --git a/src/multiselect.js b/src/multiselect.js
@@ -50,7 +50,7 @@ angular.module('ui.multiselect', [])
             scope.$destroy();
           });
 
-          var popUpEl = angular.element('<multiselect-popup></multiselect-popup>');
+          var popUpEl = angular.element('<multiselect-popup multiple="'+scope.multiple+'"></multiselect-popup>');
 
           //required validator
           if (attrs.required || attrs.ngRequired) {
@@ -236,37 +236,46 @@ angular.module('ui.multiselect', [])
       link: function (scope, element, attrs) {
 
         scope.isVisible = false;
+        scope.eventHandlerIsBound = false;
+        scope.multiple = attrs.multiple ? true : false;
 
         scope.toggleSelect = function () {
           if (element.hasClass('open')) {
             element.removeClass('open');
-            $document.unbind('click', clickHandler);
           } else {
             element.addClass('open');
-            $document.bind('click', clickHandler);
+            scope.bindEventHandler();
+            scope.resize();
             scope.focus();
           }
         };
 
-        function clickHandler(event) {
-          if (elementMatchesAnyInArray(event.target, element.find(event.target.tagName)))
+        scope.bindEventHandler = function() {
+          if (scope.eventHandlerIsBound) {
             return;
-          element.removeClass('open');
-          $document.unbind('click', clickHandler);
-          scope.$apply();
+          }
+          element.find('ul, ul *').bind('click', function(event) {
+            if (scope.multiple || 'A' != event.target.tagName) {
+              event.stopPropagation();
+            }
+          });
+          scope.eventHandlerIsBound = true;
+        }
+
+        scope.resize = function() {
+          var $ul = element.find('ul')
+            , margin = 50
+            , top = $ul.position().top
+            , maxHeight = $(window).innerHeight();
+          if (($ul.height() + top) > maxHeight) {
+            $ul.css({height: (maxHeight - top - margin), overflow: 'scroll'});
+          }
         }
 
         scope.focus = function focus(){
           var searchBox = element.find('input')[0];
           searchBox.focus(); 
         }
-
-        var elementMatchesAnyInArray = function (element, elementArray) {
-          for (var i = 0; i < elementArray.length; i++)
-            if (element == elementArray[i])
-              return true;
-          return false;
-        }
       }
     }
   }]);