diff --git a/src/at.js b/src/at.js
index f5869a2..8405902 100644
--- a/src/at.js
+++ b/src/at.js
@@ -39,7 +39,7 @@ angular.module('At', ['ngCaret'])
         }
       },
 
-      insert: function (element, content, data, query, range) {
+      insert: function (element, content, data, query, range, ngModel) {
         var insertNode, pos, sel, source, startStr, text;
         if (element.attr('contenteditable') === 'true') {
           insertNode = angular.element('<span contenteditable="false">@' + data + '&nbsp;</span>');
@@ -65,6 +65,7 @@ angular.module('At', ['ngCaret'])
           startStr = source.slice(0, Math.max(query.headPos - 1, 0));
           text = startStr + '@' + data + ' ' + (source.slice(query.endPos || 0));
           element.val(text);
+          ngModel.$setViewValue(text);
         }
       },
 
@@ -104,7 +105,7 @@ angular.module('At', ['ngCaret'])
     };
   })
 
-  .directive('atUser', function (
+  .directive('atUser', ['$http', '$timeout', 'Caret', 'AtUtils', function (
     $http,
     $timeout,
     Caret,
@@ -118,58 +119,70 @@ angular.module('At', ['ngCaret'])
         var subtext, caretOffset;
         var flag = attrs.flag || '@';
         var lineHeight = scope.lineHeight || 16;
+        var updateInterval = attrs.updateinterval || 5; //ms
         scope.isAtListHidden = true;
+        
+        scope.watchDelayIdle = updateInterval; //ms
+        scope.watchDelayActive = 5; //ms
+        scope.watchDelay = scope.watchDelayIdle;
+        scope.watchTimer = false;
 
         scope.$watch(function () {
           return scope.caretPos;
         }, function (nowCaretPos) {
+          if(scope.watchTimer){
+            $timeout.cancel(scope.watchTimer)
+          }  
+          scope.watchTimer = $timeout(function(){
+            if (angular.isDefined(nowCaretPos)) {
+              scope.content = AtUtils.getContent(element);
+              subtext = scope.content.slice(0, nowCaretPos);
+              scope.query = AtUtils.query(subtext, flag);
+              caretOffset = Caret.getOffset(element);
+
+              if (scope.query === null) {
+                scope.isAtListHidden = true;
+                scope.watchDelay = scope.watchDelayIdle;
+              }
 
-          if (angular.isDefined(nowCaretPos)) {
-            scope.content = AtUtils.getContent(element);
-            subtext = scope.content.slice(0, nowCaretPos);
-            scope.query = AtUtils.query(subtext, flag);
-            caretOffset = Caret.getOffset(element);
-
-            if (scope.query === null) {
-              scope.isAtListHidden = true;
-            }
-
-            if (angular.isString(scope.query) && scope.query.length <= 10) {
-              if (scope.query === '' && element.next().attr('auto-follow') === 'true') {
-                element.next().find('ul').css({
-                  left: caretOffset.left,
-                  top: caretOffset.top + lineHeight
-                });
+              if (angular.isString(scope.query) && scope.query.length <= 10) {
+                if (scope.query === '' && element.next().attr('auto-follow') === 'true') {
+                  element.next().find('ul').css({
+                    left: caretOffset.left,
+                    top: caretOffset.top + lineHeight
+                  });
+                }
+                scope.query = {
+                  'text': scope.query,
+                  'headPos': nowCaretPos - scope.query.length,
+                  'endPos': nowCaretPos
+                };
               }
-              scope.query = {
-                'text': scope.query,
-                'headPos': nowCaretPos - scope.query.length,
-                'endPos': nowCaretPos
-              };
-            }
 
-            if (angular.isObject(scope.query)) {
-              scope.users = scope.response;
-              scope.isAtListHidden = false;
-
-              // $http.get('data/user.json').success(function (response) {
-              //   scope.users = response.users;
-
-              //   if (scope.users.length === 0) {
-              //     scope.isAtListHidden = true;
-              //   } else {
-              //     scope.isAtListHidden = false;
-              //     $timeout(function () {
-              //       element.next().find('li').first().addClass('list-cur');
-              //     });
-              //   }
-              // });
+              if (angular.isObject(scope.query)) {
+                scope.isAtListHidden = false;
+                scope.watchDelay = scope.watchDelayActive;
+
+                // $http.get('data/user.json').success(function (response) {
+                //   scope.users = response.users;
+
+                //   if (scope.users.length === 0) {
+                //     scope.isAtListHidden = true;
+                //   } else {
+                //     scope.isAtListHidden = false;
+                //     $timeout(function () {
+                //       element.next().find('li').first().addClass('list-cur');
+                //     });
+                //   }
+                // });
+              }
             }
-          }
+          },scope.watchDelay);
         });
 
         element.bind('blur', function () {
           scope.isAtListHidden = true;
+          scope.watchDelay = scope.watchDelayIdle;
         });
 
         element.bind('click touch keyup', function () {
@@ -179,9 +192,9 @@ angular.module('At', ['ngCaret'])
         });
       }
     };
-  })
+  }])
 
-  .directive('autoComplete', function (
+  .directive('autoComplete', ['Caret', 'AtUtils', function (
     Caret,
     AtUtils
   ) {
@@ -189,18 +202,20 @@ angular.module('At', ['ngCaret'])
 
     return {
       restrict: 'EA',
-      link: function (scope, element) {
+      require: 'ngModel',
+      link: function (scope, element, attrs, ngModel) {
         var range;
         var span = element.next();
         var keyCode = {
           up: 38,
           down: 40,
-          enter: 13
+          enter: 13,
+          tab: 9
         };
 
         scope.autoComplete = function (object) {
           element[0].focus();
-          AtUtils.insert(element, scope.content, object.username, scope.query, range);
+          AtUtils.insert(element, scope.content, object.username, scope.query, range, ngModel);
           Caret.setPos(element, scope.query.headPos + object.username.length + 1);
         };
 
@@ -229,12 +244,17 @@ angular.module('At', ['ngCaret'])
               break;
               
             case keyCode.enter:
+            case keyCode.tab:
               e.originalEvent.preventDefault();
+              if(cur.length == 0) {
+                AtUtils.select.next(cur,lists);
+                cur = ul.children('.list-cur');
+              }
               var insertContent = AtUtils.select.choose(cur);
 
               scope.$apply(function () {
                 range = AtUtils.markRange();
-                AtUtils.insert(element, scope.content, insertContent, scope.query, range);
+                AtUtils.insert(element, scope.content, insertContent, scope.query, range, ngModel);
                 scope.isAtListHidden = true;
               });
               Caret.setPos(element, scope.query.headPos + insertContent.length + 1);
@@ -245,5 +265,5 @@ angular.module('At', ['ngCaret'])
         });
       }
     };
-  });
+  }]);
 
diff --git a/src/caret.js b/src/caret.js
index ec7deae..8821a08 100644
--- a/src/caret.js
+++ b/src/caret.js
@@ -1,5 +1,5 @@
 angular.module('ngCaret', [])
-  .factory('EditableCaret', function (
+  .factory('EditableCaret', ['CaretUtils', function (
     CaretUtils
   ) {
     'use strict';
@@ -83,9 +83,9 @@ angular.module('ngCaret', [])
         };
       }
     };
-  })
+  }])
 
-  .factory('InputCaret', function (
+  .factory('InputCaret', ['Mirror', 'CaretUtils', function (
     Mirror,
     CaretUtils
   ) {
@@ -198,7 +198,7 @@ angular.module('ngCaret', [])
         };
       }
     };
-  })
+  }])
 
   .factory('Mirror', function () {
     'use strict';
@@ -282,7 +282,7 @@ angular.module('ngCaret', [])
     };
   })
 
-  .factory('Caret', function (
+  .factory('Caret', ['InputCaret', 'EditableCaret', function (
     InputCaret,
     EditableCaret
     ) {
@@ -312,4 +312,4 @@ angular.module('ngCaret', [])
         }
       }
     };
-  });
+  }]);