Added setting template:

 - Type: String
 - Default: {{getPropertyForObject(option, settings.displayProp)}}
 - Description: Can be used to modify the appearance of an option in the list, each option is accessible as option.

Closes issue #2

Author: pkempenaers

pages/javascripts/pages/home/ExampleCtrl.js

@@ -189,5 +189,16 @@ angular.module('exampleApp').controller('ExampleCtrl', ['$scope', function($scop
     	selectionLimit: 1
     };
 
+    $scope.example19model = {};
+    $scope.example19data = [
+        { id: 1, name: "David" },
+        { id: 2, name: "Jhon" },
+        { id: 3, name: "Lisa" },
+        { id: 4, name: "Nicole" },
+        { id: 5, name: "Danny" }];
+    $scope.example19settings = {
+    	template: '<b>{{option.name}}</b>'
+    };
+
     $scope.customFilter = 'a';
 }]);

pages/javascripts/pages/home/home.html

@@ -657,7 +657,7 @@ <h3>Demo</h3>
 				</div>
 				<div class="col-xs-12 col-sm-6">
 					<h3>The model:</h3>
-					<pre>{{example17model|json}}</pre>
+					<pre>{{example18model|json}}</pre>
 				</div>
 			</div>
 			<div class="row">
@@ -680,6 +680,45 @@ <h3>Code</h3>
   keyboardControls: true,
   enableSearch: true,
   selectionLimit: 1
+};
+							</div>
+				</div>
+			</div>
+		</accordion-group>
+		<accordion-group heading="Custom template per option">
+			<div class="row">
+				<div class="col-xs-12 col-sm-6">
+					<h3>Demo</h3>
+					Instead of using the default template you can use an own custom temlpate.
+					<div class="well">
+						<div>
+							<div ng-dropdown-multiselect="" options="example19data" selected-model="example19model" extra-settings="example19settings"></div>
+						</div>
+					</div>
+				</div>
+				<div class="col-xs-12 col-sm-6">
+					<h3>The model:</h3>
+					<pre>{{example19model|json}}</pre>
+				</div>
+			</div>
+			<div class="row">
+				<div class="col-md-12">
+					<h3>Code</h3>
+							<div hljs>
+// HTML 
+<div ng-dropdown-multiselect="" options="example19data" selected-model="example19model" extra-settings="example19settings"></div>
+
+// JavaScript 
+$scope.example19model = {};
+$scope.example19data = [
+    { id: 1, name: "David" },
+    { id: 2, name: "Jhon" },
+    { id: 3, name: "Lisa" },
+    { id: 4, name: "Nicole" },
+    { id: 5, name: "Danny" }
+];
+$scope.example19settings = {
+  template: '<b>{{option.name}}</b>'
 };
 							</div>
 				</div>
@@ -885,6 +924,12 @@ <h2>Settings</h2>
 				<td>false</td>
 				<td>When activated the dropdown can be used with the keyboard instead of with the mouse.</td>
 			</tr>
+			<tr>
+				<td>template</td>
+				<td>String</td>
+				<td>{{getPropertyForObject(option, settings.displayProp)} }</td>
+				<td>Can be used to modify the appearance of an option in the list, each option is accessible as option.</td>
+			</tr>
 		</tbody>
 	</table>
 	<h2>Events</h2>

src/angularjs-dropdown-multiselect.js

@@ -2,6 +2,14 @@
 
 var directiveModule = angular.module('angularjs-dropdown-multiselect', []);
 
+directiveModule.directive('staticInclude', function ($compile) {
+    return function (scope, element, attrs) {
+        var template = attrs.staticInclude;
+        var contents = element.html(template).contents();
+        $compile(contents)(scope);
+    };
+});
+
 directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$compile', '$parse',
     function ($filter, $document, $compile, $parse) {
 
@@ -39,9 +47,9 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
                 template += '<a role="menuitem" class="option" tabindex="-1" ng-click="setSelectedItem(getPropertyForObject(option,settings.idProp))">';
 
                 if (checkboxes) {
-                    template += '<div class="checkbox"><label><input class="checkboxInput" type="checkbox" ng-click="checkboxClick($event, getPropertyForObject(option,settings.idProp))" ng-checked="isChecked(getPropertyForObject(option,settings.idProp))" /> {{getPropertyForObject(option, settings.displayProp)}}</label></div></a>';
+                    template += '<div class="checkbox"><label><input class="checkboxInput" type="checkbox" ng-click="checkboxClick($event, getPropertyForObject(option,settings.idProp))" ng-checked="isChecked(getPropertyForObject(option,settings.idProp))" /><div static-include="{{settings.template}}"></div></label></div></a>';
                 } else {
-                    template += '<span data-ng-class="{\'glyphicon glyphicon-ok\': isChecked(getPropertyForObject(option,settings.idProp))}"></span> {{getPropertyForObject(option, settings.displayProp)}}</a>';
+                    template += '<span data-ng-class="{\'glyphicon glyphicon-ok\': isChecked(getPropertyForObject(option,settings.idProp))}"></span><div static-include="{{settings.template}}"></div></a>';
                 }
 
                 template += '</li>';
@@ -123,7 +131,8 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
                     smartButtonMaxItems: 0,
                     smartButtonTextConverter: angular.noop,
                     styleActive: false,
-										keyboardControls: false
+                    keyboardControls: false,
+                    template: '{{getPropertyForObject(option, settings.displayProp)}}'
                 };
 
                 $scope.texts = {