Updated demo app to use a clearer example.

Updated README to mention the demo app and include a link to an example on plunker.
Rebuilt the module.

README.md

@@ -1,6 +1,6 @@
 so-multiselect [![Build Status](https://travis-ci.org/gordonmcg-sonalake/so-multiselect.svg?branch=master)](https://travis-ci.org/gordonmcg-sonalake/so-multiselect) [![codecov coverage](https://img.shields.io/codecov/c/github/gordonmcg-sonalake/so-multiselect.svg?style=flat-square)](https://codecov.io/github/gordonmcg-sonalake/so-multiselect) [![MIT License](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)]()
 ================
-> Angular module that provides a multi-select dropdown list using checkboxes.
+> Angular module that provides a multi-select dropdown list with checkboxes.
 
 ![so-multiselect](other/example.png)
 
@@ -13,6 +13,13 @@ The required dependencies are:
 
 This module was built with the intention of using it alongside [UI Bootstrap](https://github.com/angular-ui/bootstrap).
 
+Demo
+-----
+
+For an example of `so-multiselect` in action, take a look at the demo app inside src/demo.
+
+Alternatively, you can find the same [example on plunker.](https://plnkr.co/edit/E3E5KpHdwemNaoXtWimB?p=preview)
+
 Getting Started
 ---------------
 
@@ -44,31 +51,31 @@ Set up your models in your controller:
 
 ```javascript
 
-$scope.things = [{
-	key: 't1',
-	name: 'Thing 1'
+$scope.flavours = [{
+	key: 'f1',
+	name: 'Strawberry'
 }, {
-	key: 't2',
-	name: 'Thing 2'
+	key: 'f2',
+	name: 'Classico'
 }, {
-	key: 't3',
-	name: 'Thing 3'
+	key: 'f3',
+	name: 'Mint'
 }];
 
-$scope.selectedItems = [];
+$scope.chosenFlavours = [];
 
-$scope.onThingsSelected = function(selectedItems) {
-	$scope.selectedItems = selectedItems;
+$scope.onFlavourSelected = function(selectedItems) {
+	$scope.chosenFlavours = selectedItems;
 };
 ```
 
 Apply the directive to your HTML:
 
 ```html
-<div so-multiselect items="things" name="Thing" on-selected="onThingsSelected(selectedItems)" button-class="btn-grey"></div>
+<div so-multiselect items="flavourList" name="Flavours" on-selected="onFlavourSelected(selectedItems)" button-class="btn-grey"></div>
 ```
 
-* `items` takes a reference to the array of object to appear in the dropdown list, each object containing a `key` and `name`.
+* `items` takes a reference to the array of object to appear in the dropdown list; each object must contain `key` and `name` attributes.
 * `name` is the value for the label that appears inside the trigger for the dropdown list.
 * `on-selected` takes a reference to the callback function you want to execute when an item is selected in the list. The `selectedItems` parameter contains an array of the selected objects.
 * `button-class` is an optional attirbute if you wish to add any extra CSS classes to the trigger for the dropdown list.

dist/so-multiselect.css

@@ -1,4 +1,4 @@
-/*! so-multiselect - 1.0.0 - 2016-05-17
+/*! so-multiselect - 1.0.0 - 2016-05-23
  * Copyright (c) 2016 Sonalake;
  */
 .multiselect-container .filter-wrap {

dist/so-multiselect.js

@@ -1,4 +1,4 @@
-/*! so-multiselect - 1.0.0 - 2016-05-17
+/*! so-multiselect - 1.0.0 - 2016-05-23
  * Copyright (c) 2016 Sonalake;
  */
 (function(window, $, angular, undefined) {

src/demo/app.js

@@ -3,25 +3,25 @@ angular.module('demo', [
 ])
 
 .controller('DemoCtrl', ['$scope', function ($scope) {
-	// the selector config
-	$scope.things = [{
-		key: 't1',
-		name: 'Thing 1'
+	$scope.flavourList = [{
+		key: 'f1',
+		name: 'Strawberry'
 	}, {
-		key: 't2',
-		name: 'Thing 2'
+		key: 'f2',
+		name: 'Classico'
 	}, {
-		key: 't3',
-		name: 'Thing 3'
+		key: 'f3',
+		name: 'Mint'
 	}];
 
-	$scope.items = [];
+	$scope.chosenFlavours = [];
 
-	$scope.onThingsSelected = function(selectedItem) {
-		$scope.items = selectedItem;
+	$scope.onFlavourSelected = function(selectedItem) {
+		$scope.chosenFlavours = selectedItem;
 	};
 
 
+	// relates to tabs and example code
 	$scope.demo1 = {
 		markup: true,
 		javascript: false

src/demo/index.html

@@ -46,6 +46,14 @@
 			.btn-grey:focus, .btn-grey:active:focus {
 				outline: 0;
 			}
+
+			/**
+			 * overwriting the default max-width so that we can see more
+			 * of the value names.
+			 */
+			.multiselect-container .filter-wrap .filter-values {
+				max-width: 120px;
+			}
 		</style>
 	</head>
 	<body ng-app="demo" id="ng-app">
@@ -57,14 +65,21 @@ <h1>Sonalake Multi-Select</h1>
 			<h3>Basic Demo</h3>
 			<p>This is a basic demo set up. It gives a quick example of how to use so-multiselect.</p>
 			<div class="row">
-				<div class="col-xs-12">
+				<div class="col-xs-6">
 					<ul class="nav navbar-nav">
 						<li>
-							<div so-multiselect items="things" name="Thing" on-selected="onThingsSelected(selectedItems)" button-class="btn-grey"></div>
+							<div so-multiselect items="flavourList" name="Flavours" on-selected="onFlavourSelected(selectedItems)" button-class="btn-grey"></div>
 						</li>
-						<li><p class="navbar-text">Items selected: <strong>{{items.length}}</strong></p></li>
 					</ul>
 				</div>
+				<div class="col-xs-6">
+				  <p>Chosen Flavours: <strong>{{chosenFlavours.length}}</strong></p>
+				  <ul>
+				    <li ng-repeat="item in chosenFlavours">
+				      {{item.name}}
+				    </li>
+				  </ul>
+				</div>
 			</div>
 			<hr/>
 			<div class="row">
@@ -84,31 +99,31 @@ <h3>Basic Demo</h3>
 						<div class="tab-content">
 							<div class="tab-pane" ng-class="{'active':demo1.markup}" ng-show="demo1.markup">
 								<pre><code class="html" ng-non-bindable>&lt;div so-multiselect
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;items="things"
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name="Thing"
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;on-selected="onThingsSelected(selectedItems)"
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;items="flavourList"
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name="Flavours"
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;on-selected="onFlavourSelected(selectedItems)"
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button-class="btn-grey"
 &gt;&lt;/div&gt;
-&lt;p&gt;Items selected: &lt;strong&gt;{{items.length}}&lt;/strong&gt;&lt;/p&gt;</code></pre>
+&lt;p&gt;Chosen Flavours: &lt;strong&gt;{{chosenFlavours.length}}&lt;/strong&gt;&lt;/p&gt;</code></pre>
 							</div>
 							<div class="tab-pane" ng-class="{'active':demo1.javascript}" ng-show="demo1.javascript">
 								<pre><code class="javascript" ng-non-bindable>.controller('DemoCtrl', ['$scope', function ($scope) {
 &nbsp;&nbsp;&nbsp;&nbsp;// the selector config
-&nbsp;&nbsp;&nbsp;&nbsp;$scope.things = [{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 't1',
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: 'Thing 1'
+&nbsp;&nbsp;&nbsp;&nbsp;$scope.flavourList = [{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'f1',
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: 'Strawberry'
 &nbsp;&nbsp;&nbsp;&nbsp;}, {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 't2',
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: 'Thing 2'
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'f2',
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: 'Classico'
 &nbsp;&nbsp;&nbsp;&nbsp;}, {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 't3',
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: 'Thing 3'
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'f3',
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: 'Mint'
 &nbsp;&nbsp;&nbsp;&nbsp;}];
 
-&nbsp;&nbsp;&nbsp;&nbsp;$scope.items = [];
+&nbsp;&nbsp;&nbsp;&nbsp;$scope.chosenFlavours = [];
 
-&nbsp;&nbsp;&nbsp;&nbsp;$scope.onThingsSelected = function(selectedItem) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$scope.items = selectedItem;
+&nbsp;&nbsp;&nbsp;&nbsp;$scope.onFlavourSelected = function(selectedItem) {
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$scope.chosenFlavours = selectedItem;
 &nbsp;&nbsp;&nbsp;&nbsp;};
 }])</code></pre>
 							</div>