diff --git a/Gruntfile.js b/Gruntfile.js
index 9c51abed..67cff4f2 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -15,7 +15,6 @@ module.exports = function (grunt) {
         // Lint & run unit tests in Karma
         // Just running `$ grunt watch` will only lint your code; to run tests
         // on watch, use `$ grunt watch:karma` to start a Karma server first
-        files: ['src/select2.js', 'test/select2Spec.js'],
         tasks: ['jshint', 'karma:unit:run']
       }
     },
@@ -37,8 +36,8 @@ module.exports = function (grunt) {
     jshint: {
       all:[
         'gruntFile.js',
-        'angucomplete.js',
-        'test/**/*Spec.js'
+        'angucomplete-alt.js',
+        'test/**/*.spec.js'
       ],
       options: {
         jshintrc: '.jshintrc'
diff --git a/README.md b/README.md
index e6f27737..e0319e61 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,9 @@
-angucomplete-extra
+angucomplete-alt
 ============
 
-A simple but powerful AngularJS directive that allows you to quickly create autocomplete boxes that pull data either from a server or local variable.
+This is a fork of Daryl Rowland's angucomplete (https://github.com/darylrowland/angucomplete) with a bit of tweaks here and there.
 
-To see a demo go here: http://ghiden.github.io/angucomplete-extra
+To see a demo go here: http://ghiden.github.io/angucomplete-alt
 
 ###Key Features
 * Show just a title, a title and a description or a title, description and image in your autocomplete list
@@ -16,23 +16,23 @@ To see a demo go here: http://ghiden.github.io/angucomplete-extra
 * Clear on selection: when you select an item, input field is cleared.
 
 ### Getting Started
-Download the code, and include the angucomplete.js file in your page. Then add the angucomplete module to your Angular App file, e.g.
+Download the code, and include the angucomplete-alt.js file in your page. Then add the angucomplete-alt module to your Angular App file, e.g.
 ```html
-var app = angular.module('app', ["angucomplete"]);
+var app = angular.module('app', ["angucomplete-alt"]);
 ```
 
 ### Local Usage
 
 ```html
-<angucomplete id="ex1"
-              placeholder="Search countries"
+<angucomplete-alt id="ex1"
+              place-holder="Search countries"
               pause="100"
-              selectedobject="selectedCountry"
-              localdata="countries"
-              searchfields="name"
-              titlefield="name"
+              selected-object="selectedCountry"
+              local-data="countries"
+              search-fields="name"
+              title-field="name"
               minlength="1"
-              inputclass="form-control form-control-small"/>
+              input-class="form-control form-control-small"/>
 ```
 
 ### Remote Usage
@@ -41,13 +41,13 @@ var app = angular.module('app', ["angucomplete"]);
 <angucomplete id="members"
               placeholder="Search members"
               pause="400"
-              selectedobject="testObj"
-              url="http://myserver.com/api/user/find?s="
-              datafield="results"
-              titlefield="firstName,surname"
-              descriptionfield="email"
-              imagefield="profilePic"
-              inputclass="form-control form-control-small"/>
+              selected-object="testObj"
+              remote-url="http://myserver.com/api/user/find?s="
+              remote-url-data-field="results"
+              title-field="firstName,surname"
+              description-field="email"
+              image-field="profilePic"
+              input-class="form-control form-control-small"/>
 ```
 
 ### Description of attributes
@@ -56,16 +56,16 @@ var app = angular.module('app', ["angucomplete"]);
 | id | A unique ID for the field | Yes | members |
 | placeholder | Placeholder text for the search field | No | Search members |
 | pause | The time to wait (in milliseconds) before searching when the user enters new characters | No | 400 |
-| selectedObject | Where to store the selected object in your model/controller (like ng-model) | Yes | myObject |
-| url | The remote URL to hit to query for results in JSON. angucomplete will automatically append the search string on the end of this, so it must be a GET request | No | http://myserver.com/api/users/find?searchstr= |
-| datafield | The name of the field in the JSON object returned back that holds the Array of objects to be used for the autocomplete list. | No | results |
-| titlefield | The name of the field in the JSON objects returned back that should be used for displaying the title in the autocomplete list. Note, if you want to combine fields together, you can comma separate them here (e.g. for a first and last name combined) | Yes | firstName,lastName |
-| descriptionfield | The name of the field in the JSON objects returned back that should be used for displaying the description in the autocomplete list | No | twitterUsername |
-| imagefield | The name of the field in the JSON objects returned back that should be used for displaying an image in the autocomplete list | No | pic |
+| selected-object | Where to store the selected object in your model/controller (like ng-model) | Yes | myObject |
+| remote-url | The remote URL to hit to query for results in JSON. angucomplete will automatically append the search string on the end of this, so it must be a GET request | No | http://myserver.com/api/users/find?searchstr= |
+| remote-url-data-field | The name of the field in the JSON object returned back that holds the Array of objects to be used for the autocomplete list. | No | results |
+| title-field | The name of the field in the JSON objects returned back that should be used for displaying the title in the autocomplete list. Note, if you want to combine fields together, you can comma separate them here (e.g. for a first and last name combined) | Yes | firstName,lastName |
+| description-field | The name of the field in the JSON objects returned back that should be used for displaying the description in the autocomplete list | No | twitterUsername |
+| image-field | The name of the field in the JSON objects returned back that should be used for displaying an image in the autocomplete list | No | pic |
 | minlength | The minimum length of string required before searching | No | 3 |
-| inputclass | The classes to use for styling the input box | No | form-control |
-| localdata | The local data variable to use from your controller. Should be an array of objects | No | countriesList |
-| searchfields | The fields from your local data to search on (comma separate them) | No | title,description |
-| dataformatfn | A function that takes a query string and returns parameter(s) for GET. It should take the query string as argument and returns a key-value object.| No | Suppose if you need to send a query keyword and a timestamp to search API, you can write a function like this in the parent scope. $scope.dataFormatFn = function(str) { return {q: str, timestamp: +new Date()}; } |
-| clearselected | To clear out input field upon selecting an item, set this attribute to true. | No | true |
+| input-class | The classes to use for styling the input box | No | form-control |
+| local-data | The local data variable to use from your controller. Should be an array of objects | No | countriesList |
+| search-fields | The fields from your local data to search on (comma separate them) | No | title,description |
+| remote-url-request-formatter | A function that takes a query string and returns parameter(s) for GET. It should take the query string as argument and returns a key-value object.| No | Suppose if you need to send a query keyword and a timestamp to search API, you can write a function like this in the parent scope. $scope.dataFormatFn = function(str) { return {q: str, timestamp: +new Date()}; } |
+| clear-selected | To clear out input field upon selecting an item, set this attribute to true. | No | true |
 
diff --git a/angucomplete.css b/angucomplete-alt.css
similarity index 100%
rename from angucomplete.css
rename to angucomplete-alt.css
diff --git a/angucomplete-alt.js b/angucomplete-alt.js
new file mode 100644
index 00000000..6f9ca2df
--- /dev/null
+++ b/angucomplete-alt.js
@@ -0,0 +1,252 @@
+/**
+ * angucomplete-extra
+ * Autocomplete directive for AngularJS
+ * This is a fork of Daryl Rowland's angucomplete with some extra features.
+ * By Hidenari Nozaki
+ */
+'use strict';
+
+angular.module('angucomplete-alt', [] ).directive('angucompleteAlt', ['$parse', '$http', '$sce', '$timeout', function ($parse, $http, $sce, $timeout) {
+  var KEY_DW = 40,
+      KEY_UP = 38,
+      KEY_ES = 27,
+      KEY_EN = 13,
+      KEY_BS =  8,
+      MIN_LENGTH = 3,
+      PAUSE = 500;
+
+  return {
+    restrict: 'EA',
+    scope: {
+      selectedObject: '=',
+      localData: '=',
+      remoteUrlRequestFormatter: '=',
+      id: '@',
+      placeholder: '@',
+      remoteUrl: '@',
+      remoteUrlDataField: '@',
+      titleField: '@',
+      descriptionField: '@',
+      imageField: '@',
+      inputClass: '@',
+      pause: '@',
+      searchFields: '@',
+      minlength: '@',
+      matchClass: '@',
+      clearSelected: '@'
+    },
+    template: '<div class="angucomplete-holder"><input id="{{id}}_value" ng-model="searchStr" type="text" placeholder="{{placeholder}}" class="{{inputClass}}"/><div id="{{id}}_dropdown" class="angucomplete-dropdown" ng-if="showDropdown"><div class="angucomplete-searching" ng-show="searching">Searching...</div><div class="angucomplete-searching" ng-show="!searching && (!results || results.length == 0)">No results found</div><div class="angucomplete-row" ng-repeat="result in results" ng-click="selectResult(result)" ng-mouseover="hoverRow()" ng-class="{\'angucomplete-selected-row\': $index == currentIndex}"><div ng-if="imageField" class="angucomplete-image-holder"><img ng-if="result.image && result.image != \'\'" ng-src="{{result.image}}" class="angucomplete-image"/><div ng-if="!result.image && result.image != \'\'" class="angucomplete-image-default"></div></div><div class="angucomplete-title" ng-if="matchClass" ng-bind-html="result.title"></div><div class="angucomplete-title" ng-if="!matchClass">{{ result.title }}</div><div ng-if="result.description && result.description != \'\'" class="angucomplete-description">{{result.description}}</div></div></div></div>',
+    link: function(scope, elem, attrs) {
+      var isNewSearchNeeded, inputField, minlength = MIN_LENGTH, searchTimer = null, lastSearchTerm = null;
+
+      scope.currentIndex = null;
+      scope.searching = false;
+      scope.searchStr = null;
+
+      if (scope.minlength && scope.minlength !== '') {
+        minlength = scope.minlength;
+      }
+
+      if (!scope.pause) {
+        scope.pause = PAUSE;
+      }
+
+      if (!scope.clearSelected) {
+        scope.clearSelected = false;
+      }
+
+      isNewSearchNeeded = function(newTerm, oldTerm) {
+        return newTerm.length >= minlength && newTerm !== oldTerm;
+      };
+
+      scope.processResults = function(responseData, str) {
+        var titleFields, titleCode, i, t, description, image, text, re, strPart;
+
+        if (responseData && responseData.length > 0) {
+          scope.results = [];
+
+          titleFields = [];
+          if (scope.titleField && scope.titleField !== '') {
+            titleFields = scope.titleField.split(',');
+          }
+
+          for (i = 0; i < responseData.length; i++) {
+            // Get title variables
+            titleCode = [];
+
+            for (t = 0; t < titleFields.length; t++) {
+              titleCode.push(responseData[i][titleFields[t]]);
+            }
+
+            description = '';
+            if (scope.descriptionField) {
+              description = responseData[i][scope.descriptionField];
+            }
+
+            image = '';
+            if (scope.imageField) {
+              image = responseData[i][scope.imageField];
+            }
+
+            text = titleCode.join(' ');
+            if (scope.matchClass) {
+              re = new RegExp(str, 'i');
+              strPart = text.match(re)[0];
+              text = $sce.trustAsHtml(text.replace(re, '<span class="'+ scope.matchClass +'">'+ strPart +'</span>'));
+            }
+
+            scope.results[scope.results.length] = {
+              title: text,
+              description: description,
+              image: image,
+              originalObject: responseData[i]
+            };
+
+          }
+
+
+        } else {
+          scope.results = [];
+        }
+      };
+
+      scope.searchTimerComplete = function(str) {
+        // Begin the search
+        var searchFields, matches, i, match, s, params;
+
+        if (str.length >= minlength) {
+          if (scope.localData) {
+            searchFields = scope.searchFields.split(',');
+
+            matches = [];
+
+            for (i = 0; i < scope.localData.length; i++) {
+              match = false;
+
+              for (s = 0; s < searchFields.length; s++) {
+                match = match || (scope.localData[i][searchFields[s]].toLowerCase().indexOf(str.toLowerCase()) >= 0);
+              }
+
+              if (match) {
+                matches[matches.length] = scope.localData[i];
+              }
+            }
+
+            scope.searching = false;
+            scope.processResults(matches, str);
+
+          } else if (scope.remoteUrlRequestFormatter) {
+            params = scope.remoteUrlRequestFormatter(str);
+            $http.get(scope.remoteUrl, {params: params}).
+              success(function(responseData, status, headers, config) {
+                scope.searching = false;
+                scope.processResults(responseData[scope.remoteUrlDataField], str);
+              }).
+            error(function(data, status, headers, config) {
+              console.log('error');
+            });
+
+          } else {
+            $http.get(scope.remoteUrl + str, {}).
+              success(function(responseData, status, headers, config) {
+                scope.searching = false;
+                scope.processResults(responseData[scope.remoteUrlDataField], str);
+              }).
+            error(function(data, status, headers, config) {
+              console.log('error');
+            });
+          }
+        }
+
+      };
+
+      scope.hoverRow = function(index) {
+        scope.currentIndex = index;
+      };
+
+      scope.keyPressed = function(event) {
+        if (!(event.which === KEY_UP || event.which === KEY_DW || event.which === KEY_EN)) {
+          if (!scope.searchStr || scope.searchStr === '') {
+            scope.showDropdown = false;
+            lastSearchTerm = null;
+          } else if (isNewSearchNeeded(scope.searchStr, lastSearchTerm)) {
+            lastSearchTerm = scope.searchStr;
+            scope.showDropdown = true;
+            scope.currentIndex = -1;
+            scope.results = [];
+
+            if (searchTimer) {
+              $timeout.cancel(searchTimer);
+            }
+
+            scope.searching = true;
+
+            searchTimer = $timeout(function() {
+              scope.searchTimerComplete(scope.searchStr);
+            }, scope.pause);
+          }
+        } else {
+          event.preventDefault();
+        }
+      };
+
+      scope.selectResult = function(result) {
+        if (scope.matchClass) {
+          result.title = result.title.toString().replace(/(<([^>]+)>)/ig, '');
+        }
+        
+        if (scope.clearSelected) {
+          scope.searchStr = null;
+        }
+        else {
+          scope.searchStr = lastSearchTerm = result.title;
+        }
+        scope.selectedObject = result;
+        scope.showDropdown = false;
+        scope.results = [];
+      };
+
+      inputField = elem.find('input');
+
+      inputField.on('keyup', scope.keyPressed);
+
+      elem.on('keyup', function (event) {
+        if(event.which === KEY_DW && scope.results) {
+          if ((scope.currentIndex + 1) < scope.results.length) {
+            scope.$apply(function() {
+              scope.currentIndex ++;
+            });
+            event.preventDefault();
+          }
+
+        } else if(event.which === KEY_UP) {
+          if (scope.currentIndex >= 1) {
+            scope.currentIndex --;
+            scope.$apply();
+            event.preventDefault();
+          }
+
+        } else if (event.which === KEY_EN && scope.results) {
+          if (scope.currentIndex >= 0 && scope.currentIndex < scope.results.length) {
+            scope.selectResult(scope.results[scope.currentIndex]);
+            scope.$apply();
+            event.preventDefault();
+          } else {
+            scope.results = [];
+            scope.$apply();
+            event.preventDefault();
+          }
+
+        } else if (event.which === KEY_ES) {
+          scope.results = [];
+          scope.showDropdown = false;
+          scope.$apply();
+        } else if (event.which === KEY_BS) {
+          scope.selectedObject = null;
+          scope.$apply();
+        }
+      });
+    }
+  };
+}]);
+
diff --git a/angucomplete.js b/angucomplete.js
deleted file mode 100644
index 87f56cd5..00000000
--- a/angucomplete.js
+++ /dev/null
@@ -1,257 +0,0 @@
-/**
- * angucomplete-extra
- * Autocomplete directive for AngularJS
- * This is a fork of Daryl Rowland's angucomplete with some extra features.
- * By Hidenari Nozaki
- */
-'use strict';
-
-angular.module('angucomplete', [] ).directive('angucomplete', ['$parse', '$http', '$sce', '$timeout', function ($parse, $http, $sce, $timeout) {
-  var KEY_DW = 40,
-      KEY_UP = 38,
-      KEY_ES = 27,
-      KEY_EN = 13,
-      KEY_BS =  8;
-
-  return {
-    restrict: 'EA',
-    scope: {
-      id: '@id',
-      placeholder: '@placeholder',
-      selectedObject: '=selectedobject',
-      url: '@url',
-      dataField: '@datafield',
-      titleField: '@titlefield',
-      descriptionField: '@descriptionfield',
-      imageField: '@imagefield',
-      inputClass: '@inputclass',
-      userPause: '@pause',
-      localData: '=localdata',
-      searchFields: '@searchfields',
-      minLengthUser: '@minlength',
-      matchClass: '@matchclass',
-      dataformatfn: '=',
-      userClearSelected: '@clearselected'
-    },
-    template: '<div class="angucomplete-holder"><input id="{{id}}_value" ng-model="searchStr" type="text" placeholder="{{placeholder}}" class="{{inputClass}}"/><div id="{{id}}_dropdown" class="angucomplete-dropdown" ng-if="showDropdown"><div class="angucomplete-searching" ng-show="searching">Searching...</div><div class="angucomplete-searching" ng-show="!searching && (!results || results.length == 0)">No results found</div><div class="angucomplete-row" ng-repeat="result in results" ng-click="selectResult(result)" ng-mouseover="hoverRow()" ng-class="{\'angucomplete-selected-row\': $index == currentIndex}"><div ng-if="imageField" class="angucomplete-image-holder"><img ng-if="result.image && result.image != \'\'" ng-src="{{result.image}}" class="angucomplete-image"/><div ng-if="!result.image && result.image != \'\'" class="angucomplete-image-default"></div></div><div class="angucomplete-title" ng-if="matchClass" ng-bind-html="result.title"></div><div class="angucomplete-title" ng-if="!matchClass">{{ result.title }}</div><div ng-if="result.description && result.description != \'\'" class="angucomplete-description">{{result.description}}</div></div></div></div>',
-    link: function($scope, elem, attrs) {
-      var isNewSearchNeeded, inputField;
-
-      $scope.lastSearchTerm = null;
-      $scope.currentIndex = null;
-      $scope.justChanged = false;
-      $scope.searchTimer = null;
-      $scope.searching = false;
-      $scope.pause = 500;
-      $scope.minLength = 3;
-      $scope.searchStr = null;
-      $scope.clearSelected = false;
-
-      if ($scope.minLengthUser && $scope.minLengthUser !== '') {
-        $scope.minLength = $scope.minLengthUser;
-      }
-
-      if ($scope.userPause) {
-        $scope.pause = $scope.userPause;
-      }
-
-      if ($scope.userClearSelected) {
-        $scope.clearSelected = $scope.userClearSelected;
-      }
-
-      isNewSearchNeeded = function(newTerm, oldTerm) {
-        return newTerm.length >= $scope.minLength && newTerm !== oldTerm;
-      };
-
-      $scope.processResults = function(responseData, str) {
-        var titleFields, titleCode, i, t, description, image, text, re, strPart;
-
-        if (responseData && responseData.length > 0) {
-          $scope.results = [];
-
-          titleFields = [];
-          if ($scope.titleField && $scope.titleField !== '') {
-            titleFields = $scope.titleField.split(',');
-          }
-
-          for (i = 0; i < responseData.length; i++) {
-            // Get title variables
-            titleCode = [];
-
-            for (t = 0; t < titleFields.length; t++) {
-              titleCode.push(responseData[i][titleFields[t]]);
-            }
-
-            description = '';
-            if ($scope.descriptionField) {
-              description = responseData[i][$scope.descriptionField];
-            }
-
-            image = '';
-            if ($scope.imageField) {
-              image = responseData[i][$scope.imageField];
-            }
-
-            text = titleCode.join(' ');
-            if ($scope.matchClass) {
-              re = new RegExp(str, 'i');
-              strPart = text.match(re)[0];
-              text = $sce.trustAsHtml(text.replace(re, '<span class="'+ $scope.matchClass +'">'+ strPart +'</span>'));
-            }
-
-            $scope.results[$scope.results.length] = {
-              title: text,
-              description: description,
-              image: image,
-              originalObject: responseData[i]
-            };
-
-          }
-
-
-        } else {
-          $scope.results = [];
-        }
-      };
-
-      $scope.searchTimerComplete = function(str) {
-        // Begin the search
-        var searchFields, matches, i, match, s, params;
-
-        if (str.length >= $scope.minLength) {
-          if ($scope.localData) {
-            searchFields = $scope.searchFields.split(',');
-
-            matches = [];
-
-            for (i = 0; i < $scope.localData.length; i++) {
-              match = false;
-
-              for (s = 0; s < searchFields.length; s++) {
-                match = match || ($scope.localData[i][searchFields[s]].toLowerCase().indexOf(str.toLowerCase()) >= 0);
-              }
-
-              if (match) {
-                matches[matches.length] = $scope.localData[i];
-              }
-            }
-
-            $scope.searching = false;
-            $scope.processResults(matches, str);
-
-          } else if ($scope.dataformatfn) {
-            params = $scope.dataformatfn(str);
-            $http.get($scope.url, {params: params}).
-              success(function(responseData, status, headers, config) {
-                $scope.searching = false;
-                $scope.processResults(responseData[$scope.dataField], str);
-              }).
-            error(function(data, status, headers, config) {
-              console.log('error');
-            });
-
-          } else {
-            $http.get($scope.url + str, {}).
-              success(function(responseData, status, headers, config) {
-                $scope.searching = false;
-                $scope.processResults(responseData[$scope.dataField], str);
-              }).
-            error(function(data, status, headers, config) {
-              console.log('error');
-            });
-          }
-        }
-
-      };
-
-      $scope.hoverRow = function(index) {
-        $scope.currentIndex = index;
-      };
-
-      $scope.keyPressed = function(event) {
-        if (!(event.which === KEY_UP || event.which === KEY_DW || event.which === KEY_EN)) {
-          if (!$scope.searchStr || $scope.searchStr === '') {
-            $scope.showDropdown = false;
-            $scope.lastSearchTerm = null;
-          } else if (isNewSearchNeeded($scope.searchStr, $scope.lastSearchTerm)) {
-            $scope.lastSearchTerm = $scope.searchStr;
-            $scope.showDropdown = true;
-            $scope.currentIndex = -1;
-            $scope.results = [];
-
-            if ($scope.searchTimer) {
-              $timeout.cancel($scope.searchTimer);
-            }
-
-            $scope.searching = true;
-
-            $scope.searchTimer = $timeout(function() {
-              $scope.searchTimerComplete($scope.searchStr);
-            }, $scope.pause);
-          }
-        } else {
-          event.preventDefault();
-        }
-      };
-
-      $scope.selectResult = function(result) {
-        if ($scope.matchClass) {
-          result.title = result.title.toString().replace(/(<([^>]+)>)/ig, '');
-        }
-        
-        if ($scope.clearSelected) {
-          $scope.searchStr = null;
-        }
-        else {
-          $scope.searchStr = $scope.lastSearchTerm = result.title;
-        }
-        $scope.selectedObject = result;
-        $scope.showDropdown = false;
-        $scope.results = [];
-        //$scope.$apply();
-      };
-
-      inputField = elem.find('input');
-
-      inputField.on('keyup', $scope.keyPressed);
-
-      elem.on('keyup', function (event) {
-        if(event.which === KEY_DW && $scope.results) {
-          if (($scope.currentIndex + 1) < $scope.results.length) {
-            $scope.$apply(function() {
-              $scope.currentIndex ++;
-            });
-            event.preventDefault();
-          }
-
-        } else if(event.which === KEY_UP) {
-          if ($scope.currentIndex >= 1) {
-            $scope.currentIndex --;
-            $scope.$apply();
-            event.preventDefault();
-          }
-
-        } else if (event.which === KEY_EN && $scope.results) {
-          if ($scope.currentIndex >= 0 && $scope.currentIndex < $scope.results.length) {
-            $scope.selectResult($scope.results[$scope.currentIndex]);
-            $scope.$apply();
-            event.preventDefault();
-          } else {
-            $scope.results = [];
-            $scope.$apply();
-            event.preventDefault();
-          }
-
-        } else if (event.which === KEY_ES) {
-          $scope.results = [];
-          $scope.showDropdown = false;
-          $scope.$apply();
-        } else if (event.which === KEY_BS) {
-          $scope.selectedObject = null;
-          $scope.$apply();
-        }
-      });
-    }
-  };
-}]);
-
diff --git a/bower.json b/bower.json
index 75d28dc1..c3dc2fe5 100644
--- a/bower.json
+++ b/bower.json
@@ -1,9 +1,9 @@
 {
   "name": "angucomplete",
-  "version": "1.0.0",
-  "homepage": "http://darylrowland.github.io/angucomplete/",
+  "version": "0.0.1",
+  "homepage": "http://ghiden.github.io/angucomplete-alt/",
   "authors": [
-    "Daryl Rowland <daryl@cloudyclear.com>"
+    "Hidenari Nozaki <hidenari@gmail.com>"
   ],
   "description": "Awesome Autocompleteness for AngularJS",
   "keywords": [
@@ -12,7 +12,7 @@
     "angularjs"
   ],
   "license": "MIT",
-  "main": "./angucomplete.js",
+  "main": "./angucomplete-alt.js",
   "ignore": [
     "example",
     "bower_components",
diff --git a/example/README.md b/example/README.md
index f8fde071..93051412 100644
--- a/example/README.md
+++ b/example/README.md
@@ -1,4 +1,4 @@
-angucomplete-extra
+angucomplete-alt
 ============
 
 AngularJS Autocomplete Directive
diff --git a/example/css/angucomplete-alt.css b/example/css/angucomplete-alt.css
new file mode 120000
index 00000000..3a339a3f
--- /dev/null
+++ b/example/css/angucomplete-alt.css
@@ -0,0 +1 @@
+../../angucomplete-alt.css
\ No newline at end of file
diff --git a/example/css/angucomplete.css b/example/css/angucomplete.css
deleted file mode 120000
index d89bf86d..00000000
--- a/example/css/angucomplete.css
+++ /dev/null
@@ -1 +0,0 @@
-../../angucomplete.css
\ No newline at end of file
diff --git a/example/index.html b/example/index.html
index 15d25c95..c68bfd38 100644
--- a/example/index.html
+++ b/example/index.html
@@ -3,13 +3,13 @@
 		<title>Angucomplete</title>
     <meta name='viewport' content='width=device-width,initial-scale=1'>
     <link rel="stylesheet" href="css/structure.css"/>
-    <link rel="stylesheet" href="css/angucomplete.css"/>
+    <link rel="stylesheet" href="css/angucomplete-alt.css"/>
     <link rel="stylesheet" href="fonts/bariol/bariol.css"/>
     </head>
 	<body ng-app="app">
 		<div ng-controller="MainController">
 
-      <h1>Angucomplete Extra</h1>
+      <h1>Angucomplete Alt</h1>
       <h2>Awesome Autocompleteness for AngularJS</h2>
       <p>
       A minimal looking autocomplete directive originally developed by Daryl Rowland as <a href="https://github.com/darylrowland/angucomplete">Angucomplete</a>, and I added a few tweaks to it.
@@ -19,7 +19,7 @@ <h2>Awesome Autocompleteness for AngularJS</h2>
 
         <h3>Example 1 - Countries of the World</h3>
         <div class="padded-row">
-          <angucomplete id="ex1" placeholder="Search countries" pause="100" selectedobject="selectedCountry" localdata="countries" searchfields="name" titlefield="name" minlength="1" inputclass="form-control form-control-small" matchclass="highlight" />
+          <angucomplete-alt id="ex1" placeholder="Search countries" pause="100" selected-object="selectedCountry" local-data="countries" search-fields="name" title-field="name" minlength="1" input-class="form-control form-control-small" match-class="highlight" />
         </div>
         <div class="" ng-show="selectedCountry">
           You selected <span class="bold-span">{{selectedCountry.originalObject.name}}</span> which has a country code of <span class="bold-span">{{selectedCountry.originalObject.code}}</span>
@@ -31,7 +31,7 @@ <h3>Example 1 - Countries of the World</h3>
 
         <h3>Example 2 - People</h3>
         <div class="padded-row">
-          <angucomplete id="ex2" placeholder="Search people" pause="300" selectedobject="selectedPerson" localdata="people" searchfields="firstName,surname" titlefield="firstName,surname" descriptionfield="twitter" imagefield="pic" minlength="1" inputclass="form-control form-control-small" matchclass="highlight" />
+          <angucomplete-alt id="ex2" placeholder="Search people" pause="300" selected-object="selectedPerson" local-data="people" search-fields="firstName,surname" title-field="firstName,surname" description-field="twitter" image-field="pic" minlength="1" input-class="form-control form-control-small" match-class="highlight" />
         </div>
         <div class="" ng-show="selectedPerson">
           You selected <span class="bold-span">{{selectedPerson.originalObject.firstName}} {{selectedPerson.originalObject.surname}}</span>
@@ -43,7 +43,7 @@ <h3>Example 2 - People</h3>
 
         <h3>Example 3 - Clear Result on Selection</h3>
         <div class="padded-row">
-          <angucomplete id="ex1" placeholder="Search countries" pause="100" selectedobject="selectedCountry2" localdata="countries" searchfields="name" titlefield="name" minlength="1" inputclass="form-control form-control-small" matchclass="highlight" clearselected="true"/>
+          <angucomplete-alt id="ex1" placeholder="Search countries" pause="100" selected-object="selectedCountry2" local-data="countries" search-fields="name" title-field="name" minlength="1" input-class="form-control form-control-small" match-class="highlight" clear-selected="true"/>
         </div>
         <div class="" ng-show="selectedCountry2">
           You selected <span class="bold-span">{{selectedCountry2.originalObject.name}}</span> which has a country code of <span class="bold-span">{{selectedCountry2.originalObject.code}}</span>
@@ -53,14 +53,14 @@ <h3>Example 3 - Clear Result on Selection</h3>
 
       <div class="very-large-padded-row">
         <h5>Originally developed by Daryl Rowland (<a href="http://twitter.com/darylrowland">@darylrowland</a>)</h5>
-        <h5>Extended by Hidenari Nozaki (<a href="http://twitter.com/ghiden">@ghiden</a>)</h5>
+        <h5>Forked by Hidenari Nozaki (<a href="http://twitter.com/ghiden">@ghiden</a>)</h5>
       </div>
 
       <script src="js/angular.min.js"></script>
       <script src="js/angular-touch.min.js"></script>
       <script src="js/app/app.js"></script>
       <script src="js/app/controllers/main-controller.js"></script>
-      <script src="js/app/directives/angucomplete.js"></script>
+      <script src="js/app/directives/angucomplete-alt.js"></script>
     </div>
 	</body>
 </html>
diff --git a/example/js/app/app.js b/example/js/app/app.js
index cbe21690..d538509b 100644
--- a/example/js/app/app.js
+++ b/example/js/app/app.js
@@ -1 +1 @@
-var app = angular.module('app', ["ngTouch", "angucomplete"]);
\ No newline at end of file
+var app = angular.module('app', ["ngTouch", "angucomplete-alt"]);
\ No newline at end of file
diff --git a/example/js/app/directives/angucomplete-alt.js b/example/js/app/directives/angucomplete-alt.js
new file mode 120000
index 00000000..4df0122d
--- /dev/null
+++ b/example/js/app/directives/angucomplete-alt.js
@@ -0,0 +1 @@
+../../../../angucomplete-alt.js
\ No newline at end of file
diff --git a/example/js/app/directives/angucomplete.js b/example/js/app/directives/angucomplete.js
deleted file mode 120000
index ffe8524e..00000000
--- a/example/js/app/directives/angucomplete.js
+++ /dev/null
@@ -1 +0,0 @@
-../../../../angucomplete.js
\ No newline at end of file
diff --git a/test/angucompleteSpec.js b/test/angucomplete-alt.spec.js
similarity index 69%
rename from test/angucompleteSpec.js
rename to test/angucomplete-alt.spec.js
index de882bf5..3f512206 100644
--- a/test/angucompleteSpec.js
+++ b/test/angucomplete-alt.spec.js
@@ -1,6 +1,6 @@
 'use strict';
 
-describe('angucomplete', function() {
+describe('angucomplete-alt', function() {
   var $compile, $scope, $timeout;
   var KEY_DW = 40,
       KEY_UP = 38,
@@ -8,7 +8,7 @@ describe('angucomplete', function() {
       KEY_EN = 13,
       KEY_BS =  8;
 
-  beforeEach(module('angucomplete'));
+  beforeEach(module('angucomplete-alt'));
 
   beforeEach(inject(function(_$compile_, $rootScope, _$timeout_) {
     $compile = _$compile_;
@@ -19,7 +19,7 @@ describe('angucomplete', function() {
   describe('Render', function() {
 
     it('should render input element with given id plus _value', function() {
-      var element = angular.element('<div angucomplete id="ex1" selectedobject="selectedCountry" titlefield="name"></div>');
+      var element = angular.element('<div angucomplete-alt id="ex1" selected-object="selectedCountry" title-field="name"></div>');
       $scope.selectedCountry = null;
       $compile(element)($scope);
       $scope.$digest();
@@ -27,7 +27,7 @@ describe('angucomplete', function() {
     });
 
     it('should render planceholder string', function() {
-      var element = angular.element('<div angucomplete id="ex1" placeholder="Search countries" selectedobject="selectedCountry" localdata="countries" searchfields="name" titlefield="name"/>');
+      var element = angular.element('<div angucomplete-alt id="ex1" placeholder="Search countries" selected-object="selectedCountry" local-data="countries" search-fields="name" title-field="name"/>');
       $scope.selectedCountry = null;
       $compile(element)($scope);
       $scope.$digest();
@@ -39,7 +39,7 @@ describe('angucomplete', function() {
   describe('Local data', function() {
 
     it('should show search results after 3 letter is entered', function() {
-      var element = angular.element('<div angucomplete id="ex1" placeholder="Search countries" selectedobject="selectedCountry" localdata="countries" searchfields="name" titlefield="name"/>');
+      var element = angular.element('<div angucomplete-alt id="ex1" placeholder="Search countries" selected-object="selectedCountry" local-data="countries" search-fields="name" title-field="name"/>');
       $scope.selectedCountry = undefined;
       $scope.countries = [
         {name: 'Afghanistan', code: 'AF'},
@@ -50,27 +50,29 @@ describe('angucomplete', function() {
       $scope.$digest();
       var inputField = element.find('#ex1_value');
       var e = $.Event('keyup');
-      e.which = 97; // letter: a
 
+      e.which = 97; // letter: a
       inputField.val('a');
       inputField.trigger('input');
       inputField.trigger(e);
-      expect(element.find('#ex1_dropdown').length).toBe(0);
+      expect(element.find('.angucomplete-row').length).toBe(0);
 
-      inputField.val('aa');
+      e.which = 108; // letter: l
+      inputField.val('al');
       inputField.trigger('input');
       inputField.trigger(e);
-      expect(element.find('#ex1_dropdown').length).toBe(0);
+      expect(element.find('.angucomplete-row').length).toBe(0);
 
-      inputField.val('aaa');
+      e.which = 98; // letter: b
+      inputField.val('alb');
       inputField.trigger('input');
       inputField.trigger(e);
       $timeout.flush();
-      expect(element.find('#ex1_dropdown').length).toBe(1);
+      expect(element.find('.angucomplete-row').length).toBeGreaterThan(0);
     });
 
     it('should show search results after 1 letter is entered with minlength being set to 1', function() {
-      var element = angular.element('<div angucomplete id="ex1" placeholder="Search countries" selectedobject="selectedCountry" localdata="countries" searchfields="name" titlefield="name" minlength="1"/>');
+      var element = angular.element('<div angucomplete-alt id="ex1" placeholder="Search countries" selected-object="selectedCountry" local-data="countries" search-fields="name" title-field="name" minlength="1"/>');
       $scope.selectedCountry = undefined;
       $scope.countries = [
         {name: 'Afghanistan', code: 'AF'},
@@ -86,14 +88,14 @@ describe('angucomplete', function() {
       inputField.trigger('input');
       inputField.trigger(e);
       $timeout.flush();
-      expect(element.find('#ex1_dropdown').length).toBe(1);
+      expect(element.find('.angucomplete-row').length).toBeGreaterThan(0);
     });
   });
 
   describe('processResults', function() {
 
     it('should set $scope.results[0].title', function() {
-      var element = angular.element('<div angucomplete id="ex1" placeholder="Search names" selectedobject="selected" localdata="names" searchfields="name" titlefield="name" minlength="1"/>');
+      var element = angular.element('<div angucomplete-alt id="ex1" placeholder="Search names" selected-object="selected" local-data="names" search-fields="name" title-field="name" minlength="1"/>');
       $compile(element)($scope);
       $scope.$digest();
 
@@ -104,7 +106,7 @@ describe('angucomplete', function() {
     });
 
     it('should set $scope.results[0].title for two title fields', function() {
-      var element = angular.element('<div angucomplete id="ex1" placeholder="Search names" selectedobject="selected" localdata="names" searchfields="name" titlefield="firstName,lastName" minlength="1"/>');
+      var element = angular.element('<div angucomplete-alt id="ex1" placeholder="Search names" selected-object="selected" local-data="names" search-fields="name" title-field="firstName,lastName" minlength="1"/>');
       $compile(element)($scope);
       $scope.$digest();
 
@@ -115,7 +117,7 @@ describe('angucomplete', function() {
     });
 
     it('should set $scope.results[0].description', function() {
-      var element = angular.element('<div angucomplete id="ex1" placeholder="Search names" selectedobject="selected" localdata="names" searchfields="name" titlefield="name" descriptionfield="desc" minlength="1"/>');
+      var element = angular.element('<div angucomplete-alt id="ex1" placeholder="Search names" selected-object="selected" local-data="names" search-fields="name" title-field="name" description-field="desc" minlength="1"/>');
       $compile(element)($scope);
       $scope.$digest();
 
@@ -126,7 +128,7 @@ describe('angucomplete', function() {
     });
 
     it('should set $scope.results[0].image', function() {
-      var element = angular.element('<div angucomplete id="ex1" placeholder="Search names" selectedobject="selected" localdata="names" searchfields="name" titlefield="name" imagefield="pic" minlength="1"/>');
+      var element = angular.element('<div angucomplete-alt id="ex1" placeholder="Search names" selected-object="selected" local-data="names" search-fields="name" title-field="name" image-field="pic" minlength="1"/>');
       $compile(element)($scope);
       $scope.$digest();
 
@@ -141,7 +143,7 @@ describe('angucomplete', function() {
 
     describe('local data', function() {
       it('should set $scope.searching to false and call $scope.processResults', function() {
-        var element = angular.element('<div angucomplete id="ex1" placeholder="Search countries" selectedobject="selectedCountry" localdata="countries" searchfields="name" titlefield="name" minlength="1"/>');
+        var element = angular.element('<div angucomplete-alt id="ex1" placeholder="Search countries" selected-object="selectedCountry" local-data="countries" search-fields="name" title-field="name" minlength="1"/>');
         $scope.selectedCountry = undefined;
         $scope.countries = [
           {name: 'Afghanistan', code: 'AF'},
@@ -161,7 +163,7 @@ describe('angucomplete', function() {
     describe('remote API', function() {
 
       it('should call $http with given url and param', inject(function($httpBackend) {
-        var element = angular.element('<div angucomplete id="ex1" placeholder="Search names" selectedobject="selected" url="names?q=" searchfields="name" datafield="data" titlefield="name" minlength="1"/>');
+        var element = angular.element('<div angucomplete-alt id="ex1" placeholder="Search names" selected-object="selected" remote-url="names?q=" search-fields="name" remote-url-data-field="data" title-field="name" minlength="1"/>');
         $compile(element)($scope);
         $scope.$digest();
 
@@ -176,7 +178,7 @@ describe('angucomplete', function() {
       }));
 
       it('should set $scope.searching to false and call $scope.processResults after success', inject(function($httpBackend) {
-        var element = angular.element('<div angucomplete id="ex1" placeholder="Search names" selectedobject="selected" url="names?q=" searchfields="name" datafield="data" titlefield="name" minlength="1"/>');
+        var element = angular.element('<div angucomplete-alt id="ex1" placeholder="Search names" selected-object="selected" remote-url="names?q=" search-fields="name" remote-url-data-field="data" title-field="name" minlength="1"/>');
         $compile(element)($scope);
         $scope.$digest();
 
@@ -196,7 +198,7 @@ describe('angucomplete', function() {
 
   describe('custom data function for ajax request', function() {
     it('should call the custom data function for ajax request if it is given', inject(function($httpBackend) {
-      var element = angular.element('<div angucomplete id="ex1" placeholder="Search names" selectedobject="selected" url="names" searchfields="name" datafield="data" dataformatfn="dataFormatFn" titlefield="name" minlength="1"/>');
+      var element = angular.element('<div angucomplete-alt id="ex1" placeholder="Search names" selected-object="selected" remote-url="names" search-fields="name" remote-url-data-field="data" remote-url-request-formatter="dataFormatFn" title-field="name" minlength="1"/>');
       var sequenceNum = 1234567890;
       $scope.dataFormatFn = function(str) {
         return {q: str, sequence: sequenceNum};
@@ -216,8 +218,8 @@ describe('angucomplete', function() {
   });
 
   describe('clear result', function() {
-    it('should clear input clearselected is true', function() {
-      var element = angular.element('<div angucomplete id="ex1" placeholder="Search countries" selectedobject="selectedCountry" localdata="countries" searchfields="name" titlefield="name" minlength="1" clearselected="true"/>');
+    it('should clear input when clear-selected is true', function() {
+      var element = angular.element('<div angucomplete-alt id="ex1" placeholder="Search countries" selected-object="selectedCountry" local-data="countries" search-fields="name" title-field="name" minlength="1" clear-selected="true"/>');
       $scope.selectedCountry = undefined;
       $scope.countries = [
         {name: 'Afghanistan', code: 'AF'},
diff --git a/test/karma.conf.js b/test/karma.conf.js
index 777fdf03..eb7222a8 100644
--- a/test/karma.conf.js
+++ b/test/karma.conf.js
@@ -17,10 +17,10 @@ module.exports = function(config) {
       'bower_components/angular-mocks/angular-mocks.js',
       
       // Source Code
-      'angucomplete.js',
+      'angucomplete-alt.js',
 
       // Test Specs
-      'test/*Spec.js'
+      'test/*.spec.js'
     ],
 
     // list of files to exclude