diff --git a/angu_complete_tmpl.html b/angu_complete_tmpl.html
new file mode 100644
index 0000000..4a714f7
--- /dev/null
+++ b/angu_complete_tmpl.html
@@ -0,0 +1,15 @@
+<div class="angucomplete-holder">
+	<input id="{{id}}_value" ng-model="searchStr" type="text" placeholder="{{placeholder}}" class="{{inputClass}}" onmouseup="this.select();" ng-focus="resetHideResults()" ng-blur="hideResults()" />
+	<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-mousedown="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>
diff --git a/angucomplete.js b/angucomplete.js
index 734e9a2..90fdc53 100644
--- a/angucomplete.js
+++ b/angucomplete.js
@@ -23,9 +23,10 @@ angular.module('angucomplete', [] )
             "localData": "=localdata",
             "searchFields": "@searchfields",
             "minLengthUser": "@minlength",
-            "matchClass": "@matchclass"
+            "matchClass": "@matchclass",
+            "searchFn": "&searchFn"
         },
-        template: '<div class="angucomplete-holder"><input id="{{id}}_value" ng-model="searchStr" type="text" placeholder="{{placeholder}}" class="{{inputClass}}" onmouseup="this.select();" ng-focus="resetHideResults()" ng-blur="hideResults()" /><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-mousedown="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>',
+        templateUrl: 'angu_complete_tmpl.html',
 
         link: function($scope, elem, attrs) {
             $scope.lastSearchTerm = null;
@@ -129,6 +130,15 @@ angular.module('angucomplete', [] )
                         $scope.searching = false;
                         $scope.processResults(matches, str);
 
+                    } else if($scope.searchFn){
+                    	$scope.$eval($scope.searchFn).
+                        then(function(response) {
+                            $scope.searching = false;
+                            $scope.processResults((($scope.dataField) ? response.data[$scope.dataField] : response.data ), str);
+                        }, function(error) {
+                            console.log("error");
+                        });
+
                     } else {
                         $http.get($scope.url + str, {}).
                             success(function(responseData, status, headers, config) {
@@ -243,4 +253,3 @@ angular.module('angucomplete', [] )
         }
     };
 });
-
diff --git a/example/angu_complete_tmpl.html b/example/angu_complete_tmpl.html
new file mode 100644
index 0000000..4a714f7
--- /dev/null
+++ b/example/angu_complete_tmpl.html
@@ -0,0 +1,15 @@
+<div class="angucomplete-holder">
+	<input id="{{id}}_value" ng-model="searchStr" type="text" placeholder="{{placeholder}}" class="{{inputClass}}" onmouseup="this.select();" ng-focus="resetHideResults()" ng-blur="hideResults()" />
+	<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-mousedown="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>
diff --git a/example/index.html b/example/index.html
index d9fdd10..3e40c63 100644
--- a/example/index.html
+++ b/example/index.html
@@ -38,6 +38,18 @@ <h3>Example 2 - People</h3>
                 </div>
 
 
+            </div>
+
+						<div class="large-padded-row">
+                <h3>Example 3 - Countries of the World with promise. Instead of passing a url, you can pass a function that returns a promise</h3>
+                <div class="padded-row">
+                    <angucomplete id="ex1" placeholder="Search countries" pause="100" selectedobject="selectedCountry" search-fn="searchFn()" searchfields="name" titlefield="name" minlength="1" inputclass="form-control form-control-small" matchclass="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>
+                </div>
+
+
             </div>
 
             <div class="very-large-padded-row">
diff --git a/example/js/app/controllers/main-controller.js b/example/js/app/controllers/main-controller.js
index 1d3215b..9d7b5ea 100644
--- a/example/js/app/controllers/main-controller.js
+++ b/example/js/app/controllers/main-controller.js
@@ -1,5 +1,5 @@
-app.controller('MainController', ['$scope', '$http',
-    function MainController($scope, $http) {
+app.controller('MainController', ['$scope', '$http', '$timeout',
+    function MainController($scope, $http, $timeout) {
 
         $scope.people = [
             {firstName: "Daryl", surname: "Rowland", twitter: "@darylrowland", pic: "img/daryl.jpeg"},
@@ -253,5 +253,10 @@ app.controller('MainController', ['$scope', '$http',
             {name: 'Zimbabwe', code: 'ZW'}
         ];
 
+        $scope.searchFn = function(){
+                  return $timeout(function(){
+                    return {data: $scope.countries};
+                  }, 1000)
+                };
     }
-]);
\ No newline at end of file
+]);