refactor(forms): Even better forms

- remove $formFactory completely
- remove parallel scope hierarchy (forms, widgets)
- use new compiler features (widgets, forms are controllers)
- any directive can add formatter/parser (validators, convertors)

Breaks no custom input types
Breaks removed integer input type
Breaks remove list input type (ng-list directive instead)
Breaks inputs bind only blur event by default (added ng:bind-change directive)

5 files changed, 1435 insertions, 1044 deletions

diff --git a/test/BinderSpec.js b/test/BinderSpec.js
index 5e27fd0f..eb916d00 100644
--- a/test/BinderSpec.js
+++ b/test/BinderSpec.js
@@ -156,7 +156,7 @@ describe('Binder', function() {
     expect(html.indexOf('action="foo();"')).toBeGreaterThan(0);
   });
 
-  it('RepeaterAdd', inject(function($rootScope, $compile, $browser) {
+  it('RepeaterAdd', inject(function($rootScope, $compile) {
     element = $compile('<div><input type="text" ng:model="item.x" ng:repeat="item in items"></div>')($rootScope);
     $rootScope.items = [{x:'a'}, {x:'b'}];
     $rootScope.$apply();
@@ -166,8 +166,7 @@ describe('Binder', function() {
     expect(second.val()).toEqual('b');
 
     first.val('ABC');
-    browserTrigger(first, 'keydown');
-    $browser.defer.flush();
+    browserTrigger(first, 'blur');
     expect($rootScope.items[0].x).toEqual('ABC');
   }));
 
diff --git a/test/service/formFactorySpec.js b/test/service/formFactorySpec.js
deleted file mode 100644
index 1a23aa49..00000000
--- a/test/service/formFactorySpec.js
+++ /dev/null
@@ -1,206 +0,0 @@
-'use strict';
-
-describe('$formFactory', function() {
-
-  it('should have global form', inject(function($rootScope, $formFactory) {
-    expect($formFactory.rootForm).toBeTruthy();
-    expect($formFactory.rootForm.$createWidget).toBeTruthy();
-  }));
-
-
-  describe('new form', function() {
-    var form;
-    var scope;
-    var log;
-
-    function WidgetCtrl($formFactory, $scope) {
-      log += '<init>';
-      $scope.$render = function() {
-        log += '$render();';
-      };
-      $scope.$on('$validate', function(e){
-        log += '$validate();';
-      });
-
-      this.$formFactory = $formFactory;
-    }
-
-    WidgetCtrl.$inject = ['$formFactory', '$scope'];
-
-    WidgetCtrl.prototype = {
-      getFormFactory: function() {
-        return this.$formFactory;
-      }
-    };
-
-    beforeEach(inject(function($rootScope, $formFactory) {
-      log = '';
-      scope = $rootScope.$new();
-      form = $formFactory(scope);
-    }));
-
-    describe('$createWidget', function() {
-      var widget;
-
-      beforeEach(function() {
-        widget = form.$createWidget({
-          scope:scope,
-          model:'text',
-          alias:'text',
-          controller:WidgetCtrl
-        });
-      });
-
-
-      describe('data flow', function() {
-        it('should have status properties', inject(function($rootScope, $formFactory) {
-          expect(widget.$error).toEqual({});
-          expect(widget.$valid).toBe(true);
-          expect(widget.$invalid).toBe(false);
-        }));
-
-
-        it('should update view when model changes', inject(function($rootScope, $formFactory) {
-          scope.text = 'abc';
-          scope.$digest();
-          expect(log).toEqual('<init>$validate();$render();');
-          expect(widget.$modelValue).toEqual('abc');
-
-          scope.text = 'xyz';
-          scope.$digest();
-          expect(widget.$modelValue).toEqual('xyz');
-
-        }));
-      });
-
-
-      describe('validation', function() {
-        it('should update state on error', inject(function($rootScope, $formFactory) {
-          widget.$emit('$invalid', 'E');
-          expect(widget.$valid).toEqual(false);
-          expect(widget.$invalid).toEqual(true);
-
-          widget.$emit('$valid', 'E');
-          expect(widget.$valid).toEqual(true);
-          expect(widget.$invalid).toEqual(false);
-        }));
-
-
-        it('should have called the model setter before the validation', inject(function($rootScope, $formFactory) {
-          var modelValue;
-          widget.$on('$validate', function() {
-            modelValue = scope.text;
-          });
-          widget.$emit('$viewChange', 'abc');
-          expect(modelValue).toEqual('abc');
-        }));
-
-
-        describe('form', function() {
-          it('should invalidate form when widget is invalid', inject(function($rootScope, $formFactory) {
-            expect(form.$error).toEqual({});
-            expect(form.$valid).toEqual(true);
-            expect(form.$invalid).toEqual(false);
-
-            widget.$emit('$invalid', 'REASON');
-
-            expect(form.$error.REASON).toEqual([widget]);
-            expect(form.$valid).toEqual(false);
-            expect(form.$invalid).toEqual(true);
-
-            var widget2 = form.$createWidget({
-              scope:scope, model:'text',
-              alias:'text',
-              controller:WidgetCtrl
-            });
-            widget2.$emit('$invalid', 'REASON');
-
-            expect(form.$error.REASON).toEqual([widget, widget2]);
-            expect(form.$valid).toEqual(false);
-            expect(form.$invalid).toEqual(true);
-
-            widget.$emit('$valid', 'REASON');
-
-            expect(form.$error.REASON).toEqual([widget2]);
-            expect(form.$valid).toEqual(false);
-            expect(form.$invalid).toEqual(true);
-
-            widget2.$emit('$valid', 'REASON');
-
-            expect(form.$error).toEqual({});
-            expect(form.$valid).toEqual(true);
-            expect(form.$invalid).toEqual(false);
-          }));
-        });
-
-      });
-
-      describe('id assignment', function() {
-        it('should default to name expression', inject(function($rootScope, $formFactory) {
-          expect(form.text).toEqual(widget);
-        }));
-
-
-        it('should use ng:id', inject(function($rootScope, $formFactory) {
-          widget = form.$createWidget({
-            scope:scope,
-            model:'text',
-            alias:'my.id',
-            controller:WidgetCtrl
-          });
-          expect(form['my.id']).toEqual(widget);
-        }));
-
-
-        it('should not override existing names', inject(function($rootScope, $formFactory) {
-          var widget2 = form.$createWidget({
-            scope:scope,
-            model:'text',
-            alias:'text',
-            controller:WidgetCtrl
-          });
-          expect(form.text).toEqual(widget);
-          expect(widget2).not.toEqual(widget);
-        }));
-      });
-
-      describe('dealocation', function() {
-        it('should dealocate', inject(function($rootScope, $formFactory) {
-          var widget2 = form.$createWidget({
-            scope:scope,
-            model:'text',
-            alias:'myId',
-            controller:WidgetCtrl
-          });
-          expect(form.myId).toEqual(widget2);
-          var widget3 = form.$createWidget({
-            scope:scope,
-            model:'text',
-            alias:'myId',
-            controller:WidgetCtrl
-          });
-          expect(form.myId).toEqual(widget2);
-
-          widget3.$destroy();
-          expect(form.myId).toEqual(widget2);
-
-          widget2.$destroy();
-          expect(form.myId).toBeUndefined();
-        }));
-
-
-        it('should remove invalid fields from errors, when child widget removed', inject(function($rootScope, $formFactory) {
-          widget.$emit('$invalid', 'MyError');
-
-          expect(form.$error.MyError).toEqual([widget]);
-          expect(form.$invalid).toEqual(true);
-
-          widget.$destroy();
-
-          expect(form.$error.MyError).toBeUndefined();
-          expect(form.$invalid).toEqual(false);
-        }));
-      });
-    });
-  });
-});
diff --git a/test/widget/formSpec.js b/test/widget/formSpec.js
index f2e90d9e..bc5f3ea7 100644
--- a/test/widget/formSpec.js
+++ b/test/widget/formSpec.js
@@ -1,122 +1,205 @@
 'use strict';
 
 describe('form', function() {
-  var doc;
+  var doc, widget, scope, $compile;
+
+  beforeEach(module(function($compileProvider) {
+    $compileProvider.directive('storeModelCtrl', function() {
+      return {
+        require: 'ngModel',
+        link: function(scope, elm, attr, ctrl) {
+          widget = ctrl;
+        }
+      };
+    });
+  }));
+
+  beforeEach(inject(function($injector) {
+    $compile = $injector.get('$compile');
+    scope = $injector.get('$rootScope');
+  }));
 
   afterEach(function() {
     dealoc(doc);
   });
 
 
-  it('should attach form to DOM', inject(function($rootScope, $compile) {
-    doc = angular.element('<form>');
-    $compile(doc)($rootScope);
+  it('should instantiate form and attach it to DOM', function() {
+    doc = $compile('<form>')(scope);
     expect(doc.data('$form')).toBeTruthy();
-  }));
+    expect(doc.data('$form') instanceof FormController).toBe(true);
+  });
+
 
+  it('should remove the widget when element removed', function() {
+    doc = $compile(
+        '<form name="form">' +
+          '<input type="text" name="alias" ng:model="value" store-model-ctrl/>' +
+        '</form>')(scope);
 
-  it('should prevent form submission', inject(function($rootScope, $compile) {
+    var form = scope.form;
+    widget.emitValidity('REQUIRED', false);
+    expect(form.alias).toBe(widget);
+    expect(form.error.REQUIRED).toEqual([widget]);
+
+    doc.find('input').remove();
+    expect(form.error.REQUIRED).toBeUndefined();
+    expect(form.alias).toBeUndefined();
+  });
+
+
+  it('should prevent form submission', function() {
     var startingUrl = '' + window.location;
-    doc = angular.element('<form name="myForm"><input type=submit val=submit>');
-    $compile(doc)($rootScope);
+    doc = jqLite('<form name="myForm"><input type="submit" value="submit" />');
+    $compile(doc)(scope);
+
     browserTrigger(doc.find('input'));
     waitsFor(
         function() { return true; },
         'let browser breath, so that the form submision can manifest itself', 10);
+
     runs(function() {
       expect('' + window.location).toEqual(startingUrl);
     });
-  }));
+  });
 
 
-  it('should not prevent form submission if action attribute present',
-      inject(function($compile, $rootScope) {
+  it('should not prevent form submission if action attribute present', function() {
     var callback = jasmine.createSpy('submit').andCallFake(function(event) {
       expect(event.isDefaultPrevented()).toBe(false);
       event.preventDefault();
     });
 
-    doc = angular.element('<form name="x" action="some.py" />');
-    $compile(doc)($rootScope);
+    doc = $compile('<form name="x" action="some.py" />')(scope);
     doc.bind('submit', callback);
 
     browserTrigger(doc, 'submit');
     expect(callback).toHaveBeenCalledOnce();
-  }));
+  });
 
 
-  it('should publish form to scope', inject(function($rootScope, $compile) {
-    doc = angular.element('<form name="myForm"></form>');
-    $compile(doc)($rootScope);
-    expect($rootScope.myForm).toBeTruthy();
+  it('should publish form to scope', function() {
+    doc = $compile('<form name="myForm"></form>')(scope);
+    expect(scope.myForm).toBeTruthy();
     expect(doc.data('$form')).toBeTruthy();
-    expect(doc.data('$form')).toEqual($rootScope.myForm);
-  }));
-
+    expect(doc.data('$form')).toEqual(scope.myForm);
+  });
 
-  it('should have ng-valide/ng-invalid style', inject(function($rootScope, $compile) {
-    doc = angular.element('<form name="myForm"><input type=text ng:model=text required>');
-    $compile(doc)($rootScope);
-    $rootScope.text = 'misko';
-    $rootScope.$digest();
 
-    expect(doc.hasClass('ng-valid')).toBe(true);
-    expect(doc.hasClass('ng-invalid')).toBe(false);
+  it('should allow name to be an expression', function() {
+    doc = $compile('<form name="obj.myForm"></form>')(scope);
 
-    $rootScope.text = '';
-    $rootScope.$digest();
-    expect(doc.hasClass('ng-valid')).toBe(false);
-    expect(doc.hasClass('ng-invalid')).toBe(true);
-  }));
+    expect(scope.obj).toBeDefined();
+    expect(scope.obj.myForm).toBeTruthy();
+  });
 
 
-  it('should chain nested forms', inject(function($rootScope, $compile) {
-    doc = angular.element(
-        '<ng:form name=parent>' +
-          '<ng:form name=child>' +
-            '<input type=text ng:model=text name=text>' +
+  it('should chain nested forms', function() {
+    doc = jqLite(
+        '<ng:form name="parent">' +
+          '<ng:form name="child">' +
+            '<input type="text" ng:model="text" name="text">' +
           '</ng:form>' +
         '</ng:form>');
-    $compile(doc)($rootScope);
-    var parent = $rootScope.parent;
-    var child = $rootScope.child;
+    $compile(doc)(scope);
+
+    var parent = scope.parent;
+    var child = scope.child;
     var input = child.text;
 
-    input.$emit('$invalid', 'MyError');
-    expect(parent.$error.MyError).toEqual([input]);
-    expect(child.$error.MyError).toEqual([input]);
+    input.emitValidity('MyError', false);
+    expect(parent.error.MyError).toEqual([input]);
+    expect(child.error.MyError).toEqual([input]);
 
-    input.$emit('$valid', 'MyError');
-    expect(parent.$error.MyError).toBeUndefined();
-    expect(child.$error.MyError).toBeUndefined();
-  }));
+    input.emitValidity('MyError', true);
+    expect(parent.error.MyError).toBeUndefined();
+    expect(child.error.MyError).toBeUndefined();
+  });
 
 
-  it('should chain nested forms in repeater', inject(function($rootScope, $compile) {
-    doc = angular.element(
+  it('should chain nested forms in repeater', function() {
+    doc = jqLite(
        '<ng:form name=parent>' +
         '<ng:form ng:repeat="f in forms" name=child>' +
           '<input type=text ng:model=text name=text>' +
          '</ng:form>' +
        '</ng:form>');
-    $compile(doc)($rootScope);
-    $rootScope.forms = [1];
-    $rootScope.$digest();
+    $compile(doc)(scope);
 
-    var parent = $rootScope.parent;
+    scope.$apply(function() {
+      scope.forms = [1];
+    });
+
+    var parent = scope.parent;
     var child = doc.find('input').scope().child;
     var input = child.text;
+
     expect(parent).toBeDefined();
     expect(child).toBeDefined();
     expect(input).toBeDefined();
 
-    input.$emit('$invalid', 'myRule');
-    expect(input.$error.myRule).toEqual(true);
-    expect(child.$error.myRule).toEqual([input]);
-    expect(parent.$error.myRule).toEqual([input]);
+    input.emitValidity('myRule', false);
+    expect(input.error.myRule).toEqual(true);
+    expect(child.error.myRule).toEqual([input]);
+    expect(parent.error.myRule).toEqual([input]);
 
-    input.$emit('$valid', 'myRule');
-    expect(parent.$error.myRule).toBeUndefined();
-    expect(child.$error.myRule).toBeUndefined();
-  }));
+    input.emitValidity('myRule', true);
+    expect(parent.error.myRule).toBeUndefined();
+    expect(child.error.myRule).toBeUndefined();
+  });
+
+
+  it('should publish widgets', function() {
+    doc = jqLite('<form name="form"><input type="text" name="w1" ng:model="some" /></form>');
+    $compile(doc)(scope);
+
+    var widget = scope.form.w1;
+    expect(widget).toBeDefined();
+    expect(widget.pristine).toBe(true);
+    expect(widget.dirty).toBe(false);
+    expect(widget.valid).toBe(true);
+    expect(widget.invalid).toBe(false);
+  });
+
+
+  describe('validation', function() {
+
+    beforeEach(function() {
+      doc = $compile(
+          '<form name="form">' +
+            '<input type="text" ng:model="name" name="name" store-model-ctrl/>' +
+          '</form>')(scope);
+
+      scope.$digest();
+    });
+
+
+    it('should have ng-valid/ng-invalid css class', function() {
+      expect(doc).toBeValid();
+
+      widget.emitValidity('ERROR', false);
+      scope.$apply();
+      expect(doc).toBeInvalid();
+
+      widget.emitValidity('ANOTHER', false);
+      scope.$apply();
+
+      widget.emitValidity('ERROR', true);
+      scope.$apply();
+      expect(doc).toBeInvalid();
+
+      widget.emitValidity('ANOTHER', true);
+      scope.$apply();
+      expect(doc).toBeValid();
+    });
+
+
+    it('should have ng-pristine/ng-dirty css class', function() {
+      expect(doc).toBePristine();
+
+      widget.touch();
+      scope.$apply();
+      expect(doc).toBeDirty();
+    });
+  });
 });
diff --git a/test/widget/inputSpec.js b/test/widget/inputSpec.js
index 3b3aa282..daea7246 100644
--- a/test/widget/inputSpec.js
+++ b/test/widget/inputSpec.js
@@ -1,630 +1,953 @@
 'use strict';
 
-describe('widget: input', function() {
-  var compile = null, element = null, scope = null, defer = null;
-  var $compile = null;
-  var doc = null;
+describe('NgModelController', function() {
+  var ctrl, scope, ngModelAccessor;
 
-  beforeEach(inject(function($rootScope, $compile, $browser) {
+  beforeEach(inject(function($rootScope, $controller) {
     scope = $rootScope;
-    defer = $browser.defer;
-    set$compile($compile);
-    element = null;
-    compile = function(html, parent) {
-      if (parent) {
-        parent.html(html);
-        element = parent.children();
-      } else {
-        element = jqLite(html);
-      }
-      $compile(element)(scope);
-      scope.$apply();
-      return scope;
-    };
+    ngModelAccessor = jasmine.createSpy('ngModel accessor');
+    ctrl = $controller(NgModelController, {$scope: scope, ngModel: ngModelAccessor});
+
+    // mock accessor (locals)
+    ngModelAccessor.andCallFake(function(val) {
+      if (isDefined(val)) scope.value = val;
+      return scope.value;
+    });
   }));
 
-  function set$compile(c) { $compile = c; }
 
-  afterEach(function() {
-    dealoc(element);
-    dealoc(doc);
-  });
+  it('should init the properties', function() {
+    expect(ctrl.dirty).toBe(false);
+    expect(ctrl.pristine).toBe(true);
+    expect(ctrl.valid).toBe(true);
+    expect(ctrl.invalid).toBe(false);
 
+    expect(ctrl.viewValue).toBeDefined();
+    expect(ctrl.modelValue).toBeDefined();
 
-  describe('text', function() {
-    var form = null,
-        formElement = null,
-        inputElement = null;
+    expect(ctrl.formatters).toEqual([]);
+    expect(ctrl.parsers).toEqual([]);
+  });
 
-    function createInput(flags){
-      var prefix = '';
-      forEach(flags, function(value, key){
-        prefix += key + '="' + value + '" ';
-      });
-      formElement = doc = angular.element('<form name="form"><input ' + prefix +
-          'type="text" ng:model="name" name="name" ng:change="change()"></form>');
-      inputElement = formElement.find('input');
-      $compile(doc)(scope);
-      form = formElement.inheritedData('$form');
-    };
 
+  describe('touch', function() {
+    it('should only fire $viewTouch when pristine', function() {
+      var spy = jasmine.createSpy('$viewTouch');
+      scope.$on('$viewTouch', spy);
 
-    it('should bind update scope from model', function() {
-      createInput();
-      scope.name = 'misko';
-      scope.$digest();
-      expect(inputElement.val()).toEqual('misko');
+      ctrl.touch();
+      expect(ctrl.pristine).toBe(false);
+      expect(ctrl.dirty).toBe(true);
+      expect(spy).toHaveBeenCalledOnce();
+
+      spy.reset();
+      ctrl.touch();
+      expect(ctrl.pristine).toBe(false);
+      expect(ctrl.dirty).toBe(true);
+      expect(spy).not.toHaveBeenCalled();
     });
+  });
 
 
-    it('should require', function() {
-      createInput({required:''});
-      scope.$digest();
-      expect(scope.form.name.$valid).toBe(false);
-      scope.name = 'misko';
-      scope.$digest();
-      expect(scope.form.name.$valid).toBe(true);
+  describe('emitValidity', function() {
+
+    it('should emit $invalid only when $valid', function() {
+      var spy = jasmine.createSpy('$invalid');
+      scope.$on('$invalid', spy);
+
+      ctrl.emitValidity('ERROR', false);
+      expect(spy).toHaveBeenCalledOnce();
+
+      spy.reset();
+      ctrl.emitValidity('ERROR', false);
+      expect(spy).not.toHaveBeenCalled();
     });
 
 
-    it('should call $destroy on element remove', function() {
-      createInput();
-      var log = '';
-      form.$on('$destroy', function() {
-        log += 'destroy;';
-      });
-      inputElement.remove();
-      expect(log).toEqual('destroy;');
+    it('should set and unset the error', function() {
+      ctrl.emitValidity('REQUIRED', false);
+      expect(ctrl.error.REQUIRED).toBe(true);
+
+      ctrl.emitValidity('REQUIRED', true);
+      expect(ctrl.error.REQUIRED).toBeUndefined();
     });
 
 
-    it('should update the model and trim input', function() {
-      createInput();
-      var log = '';
-      scope.change = function() {
-        log += 'change();';
-      };
-      inputElement.val(' a ');
-      browserTrigger(inputElement);
-      defer.flush();
-      expect(scope.name).toEqual('a');
-      expect(log).toEqual('change();');
+    it('should set valid/invalid', function() {
+      ctrl.emitValidity('FIRST', false);
+      expect(ctrl.valid).toBe(false);
+      expect(ctrl.invalid).toBe(true);
+
+      ctrl.emitValidity('SECOND', false);
+      expect(ctrl.valid).toBe(false);
+      expect(ctrl.invalid).toBe(true);
+
+      ctrl.emitValidity('SECOND', true);
+      expect(ctrl.valid).toBe(false);
+      expect(ctrl.invalid).toBe(true);
+
+      ctrl.emitValidity('FIRST', true);
+      expect(ctrl.valid).toBe(true);
+      expect(ctrl.invalid).toBe(false);
     });
 
 
-    it('should change non-html5 types to text', inject(function($rootScope, $compile) {
-      doc = angular.element('<form name="form"><input type="abc" ng:model="name"></form>');
-      $compile(doc)($rootScope);
-      expect(doc.find('input').attr('type')).toEqual('text');
-    }));
+    it('should emit $valid only when $invalid', function() {
+      var spy = jasmine.createSpy('$valid');
+      scope.$on('$valid', spy);
 
+      ctrl.emitValidity('ERROR', true);
+      expect(spy).not.toHaveBeenCalled();
 
-    it('should not change html5 types to text', inject(function($rootScope, $compile) {
-      doc = angular.element('<form name="form"><input type="number" ng:model="name"></form>');
-      $compile(doc)($rootScope);
-      expect(doc.find('input')[0].getAttribute('type')).toEqual('number');
-    }));
+      ctrl.emitValidity('ERROR', false);
+      ctrl.emitValidity('ERROR', true);
+      expect(spy).toHaveBeenCalledOnce();
+    });
   });
 
 
-  describe("input", function() {
+  describe('view -> model', function() {
 
-    describe("text", function() {
-      it('should input-text auto init and listen on keydown/change/input events', function() {
-        compile('<input type="text" ng:model="name"/>');
+    it('should set the value to $viewValue', function() {
+      ctrl.read('some-val');
+      expect(ctrl.viewValue).toBe('some-val');
+    });
 
-        scope.name = 'Adam';
-        scope.$digest();
-        expect(element.val()).toEqual("Adam");
 
-        element.val('Shyam');
-        browserTrigger(element, 'keydown');
-        // keydown event must be deferred
-        expect(scope.name).toEqual('Adam');
-        defer.flush();
-        expect(scope.name).toEqual('Shyam');
+    it('should pipeline all registered parsers and set result to $modelValue', function() {
+      var log = [];
 
-        element.val('Kai');
-        browserTrigger(element, 'change');
-        defer.flush();
-        expect(scope.name).toEqual('Kai');
+      ctrl.parsers.push(function(value) {
+        log.push(value);
+        return value + '-a';
+      });
 
-        if (!(msie<=8)) {
-          element.val('Lunar');
-          browserTrigger(element, 'input');
-          defer.flush();
-          expect(scope.name).toEqual('Lunar');
-        }
+      ctrl.parsers.push(function(value) {
+        log.push(value);
+        return value + '-b';
       });
 
+      ctrl.read('init');
+      expect(log).toEqual(['init', 'init-a']);
+      expect(ctrl.modelValue).toBe('init-a-b');
+    });
 
-      it('should not trigger eval if value does not change', function() {
-        compile('<input type="text" ng:model="name" ng:change="count = count + 1" ng:init="count=0"/>');
-        scope.name = 'Misko';
-        scope.$digest();
-        expect(scope.name).toEqual("Misko");
-        expect(scope.count).toEqual(0);
-        browserTrigger(element, 'keydown');
-        defer.flush();
-        expect(scope.name).toEqual("Misko");
-        expect(scope.count).toEqual(0);
+
+    it('should fire $viewChange only if value changed and is valid', function() {
+      var spy = jasmine.createSpy('$viewChange');
+      scope.$on('$viewChange', spy);
+
+      ctrl.read('val');
+      expect(spy).toHaveBeenCalledOnce();
+      spy.reset();
+
+      // invalid
+      ctrl.parsers.push(function() {return undefined;});
+      ctrl.read('val');
+      expect(spy).not.toHaveBeenCalled();
+    });
+  });
+
+
+  describe('model -> view', function() {
+
+    it('should set the value to $modelValue', function() {
+      scope.$apply(function() {
+        scope.value = 10;
       });
+      expect(ctrl.modelValue).toBe(10);
+    });
 
 
-      it('should allow complex reference binding', function() {
-        compile('<div>'+
-                  '<input type="text" ng:model="obj[\'abc\'].name"/>'+
-                '</div>');
-        scope.obj = { abc: { name: 'Misko'} };
-        scope.$digest();
-        expect(element.find('input').val()).toEqual('Misko');
+    it('should pipeline all registered formatters in reversed order and set result to $viewValue',
+        function() {
+      var log = [];
+
+      ctrl.formatters.unshift(function(value) {
+        log.push(value);
+        return value + 2;
       });
 
+      ctrl.formatters.unshift(function(value) {
+        log.push(value);
+        return value + '';
+      });
 
-      describe("ng:format", function() {
-        it("should format text", function() {
-          compile('<input type="list" ng:model="list"/>');
+      scope.$apply(function() {
+        scope.value = 3;
+      });
+      expect(log).toEqual([3, 5]);
+      expect(ctrl.viewValue).toBe('5');
+    });
 
-          scope.list = ['x', 'y', 'z'];
-          scope.$digest();
-          expect(element.val()).toEqual("x, y, z");
 
-          element.val('1, 2, 3');
-          browserTrigger(element);
-          defer.flush();
-          expect(scope.list).toEqual(['1', '2', '3']);
-        });
+    it('should $render only if value changed and is valid', function() {
+      spyOn(ctrl, 'render');
 
+      scope.$apply(function() {
+        scope.value= 3;
+      });
+      expect(ctrl.render).toHaveBeenCalledOnce();
+      ctrl.render.reset();
 
-        it("should render as blank if null", function() {
-          compile('<input type="text" ng:model="age" ng:format="number" ng:init="age=null"/>');
-          expect(scope.age).toBeNull();
-          expect(element[0].value).toEqual('');
-        });
+      // invalid
+      ctrl.formatters.push(function() {return undefined;});
+      scope.$apply(function() {
+        scope.value= 5;
+      });
+      expect(ctrl.render).not.toHaveBeenCalled();
+    });
+  });
+});
 
+describe('ng:model', function() {
 
-        it("should show incorrect text while number does not parse", function() {
-          compile('<input type="number" ng:model="age"/>');
-          scope.age = 123;
-          scope.$digest();
-          expect(element.val()).toEqual('123');
-          try {
-            // to allow non-number values, we have to change type so that
-            // the browser which have number validation will not interfere with
-            // this test. IE8 won't allow it hence the catch.
-            element[0].setAttribute('type', 'text');
-          } catch (e){}
-          element.val('123X');
-          browserTrigger(element, 'change');
-          defer.flush();
-          expect(element.val()).toEqual('123X');
-          expect(scope.age).toEqual(123);
-          expect(element).toBeInvalid();
-        });
+  it('should set css classes (ng-valid, ng-invalid, ng-pristine, ng-dirty)',
+      inject(function($compile, $rootScope) {
+    var element = $compile('<input type="email" ng:model="value" />')($rootScope);
 
+    $rootScope.$digest();
+    expect(element).toBeValid();
+    expect(element).toBePristine();
 
-        it("should not clobber text if model changes due to itself", function() {
-          // When the user types 'a,b' the 'a,' stage parses to ['a'] but if the
-          // $parseModel function runs it will change to 'a', in essence preventing
-          // the user from ever typying ','.
-          compile('<input type="list" ng:model="list"/>');
-
-          element.val('a ');
-          browserTrigger(element, 'change');
-          defer.flush();
-          expect(element.val()).toEqual('a ');
-          expect(scope.list).toEqual(['a']);
-
-          element.val('a ,');
-          browserTrigger(element, 'change');
-          defer.flush();
-          expect(element.val()).toEqual('a ,');
-          expect(scope.list).toEqual(['a']);
-
-          element.val('a , ');
-          browserTrigger(element, 'change');
-          defer.flush();
-          expect(element.val()).toEqual('a , ');
-          expect(scope.list).toEqual(['a']);
-
-          element.val('a , b');
-          browserTrigger(element, 'change');
-          defer.flush();
-          expect(element.val()).toEqual('a , b');
-          expect(scope.list).toEqual(['a', 'b']);
-        });
+    $rootScope.$apply(function() {
+      $rootScope.value = 'invalid-email';
+    });
+    expect(element).toBeInvalid();
+    expect(element).toBePristine();
 
+    element.val('invalid-again');
+    browserTrigger(element, 'blur');
+    expect(element).toBeInvalid();
+    expect(element).toBeDirty();
 
-        it("should come up blank when no value specified", function() {
-          compile('<input type="number" ng:model="age"/>');
-          scope.$digest();
-          expect(element.val()).toEqual('');
-          expect(scope.age).toEqual(null);
-        });
-      });
+    element.val('vojta@google.com');
+    browserTrigger(element, 'blur');
+    expect(element).toBeValid();
+    expect(element).toBeDirty();
 
+    dealoc(element);
+  }));
+});
 
-      describe("checkbox", function() {
-        it("should format booleans", function() {
-          compile('<input type="checkbox" ng:model="name" ng:init="name=false"/>');
-          expect(scope.name).toBe(false);
-          expect(element[0].checked).toBe(false);
-        });
 
+describe('input', function() {
+  var formElm, inputElm, scope, $compile;
 
-        it('should support type="checkbox" with non-standard capitalization', function() {
-          compile('<input type="checkBox" ng:model="checkbox"/>');
+  function compileInput(inputHtml) {
+    formElm = jqLite('<form name="form">' + inputHtml + '</form>');
+    inputElm = formElm.find('input');
+    $compile(formElm)(scope);
+  }
 
-          browserTrigger(element);
-          expect(scope.checkbox).toBe(true);
+  function changeInputValueTo(value) {
+    inputElm.val(value);
+    browserTrigger(inputElm, 'blur');
+  }
 
-          browserTrigger(element);
-          expect(scope.checkbox).toBe(false);
-        });
+  beforeEach(inject(function($injector) {
+    $compile = $injector.get('$compile');
+    scope = $injector.get('$rootScope');
+  }));
 
+  afterEach(function() {
+    dealoc(formElm);
+  });
 
-        it('should allow custom enumeration', function() {
-          compile('<input type="checkbox" ng:model="name" ng:true-value="y" ng:false-value="n">');
 
-          scope.name='y';
-          scope.$digest();
-          expect(element[0].checked).toBe(true);
+  it('should bind to a model', function() {
+    compileInput('<input type="text" ng:model="name" name="alias" ng:change="change()" />');
 
-          scope.name='n';
-          scope.$digest();
-          expect(element[0].checked).toBe(false);
+    scope.$apply(function() {
+      scope.name = 'misko';
+    });
 
-          scope.name='abc';
-          scope.$digest();
-          expect(element[0].checked).toBe(false);
+    expect(inputElm.val()).toBe('misko');
+  });
 
-          browserTrigger(element);
-          expect(scope.name).toEqual('y');
 
-          browserTrigger(element);
-          expect(scope.name).toEqual('n');
-        });
+  it('should call $destroy on element remove', function() {
+    compileInput('<input type="text" ng:model="name" name="alias" ng:change="change()" />');
 
+    var spy = jasmine.createSpy('on destroy');
+    scope.$on('$destroy', spy);
 
-        it('should fire ng:change when the value changes', function() {
-          compile('<input type="checkbox" ng:model="foo" ng:change="changeFn()">');
-          scope.changeFn = jasmine.createSpy('changeFn');
-          scope.$digest();
-          expect(scope.changeFn).not.toHaveBeenCalledOnce();
-          browserTrigger(element);
-          expect(scope.changeFn).toHaveBeenCalledOnce();
-        });
-      });
+    inputElm.remove();
+    expect(spy).toHaveBeenCalled();
+  });
+
+
+  it('should update the model on "blur" event', function() {
+    compileInput('<input type="text" ng:model="name" name="alias" ng:change="change()" />');
+
+    changeInputValueTo('adam');
+    expect(scope.name).toEqual('adam');
+  });
+
+
+  it('should update the model and trim the value', function() {
+    compileInput('<input type="text" ng:model="name" name="alias" ng:change="change()" />');
+
+    changeInputValueTo('  a  ');
+    expect(scope.name).toEqual('a');
+  });
+
+
+  it('should allow complex reference binding', function() {
+    compileInput('<input type="text" ng:model="obj[\'abc\'].name"/>');
+
+    scope.$apply(function() {
+      scope.obj = { abc: { name: 'Misko'} };
     });
+    expect(inputElm.val()).toEqual('Misko');
+  });
 
 
-    it("should process required", inject(function($formFactory) {
-      compile('<input type="text" ng:model="price" name="p" required/>', jqLite(document.body));
-      expect(element.hasClass('ng-invalid')).toBeTruthy();
+  it('should ignore input without ng:model attr', function() {
+    compileInput('<input type="text" name="whatever" required />');
 
-      scope.price = 'xxx';
+    browserTrigger(inputElm, 'blur');
+    expect(inputElm.hasClass('ng-valid')).toBe(false);
+    expect(inputElm.hasClass('ng-invalid')).toBe(false);
+    expect(inputElm.hasClass('ng-pristine')).toBe(false);
+    expect(inputElm.hasClass('ng-dirty')).toBe(false);
+  });
+
+
+  it('should report error on assignment error', function() {
+    expect(function() {
+      compileInput('<input type="text" ng:model="throw \'\'">');
       scope.$digest();
-      expect(element.hasClass('ng-invalid')).toBeFalsy();
+    }).toThrow("Syntax Error: Token '''' is an unexpected token at column 7 of the expression [throw ''] starting at [''].");
+  });
 
-      element.val('');
-      browserTrigger(element);
-      defer.flush();
-      expect(element.hasClass('ng-invalid')).toBeTruthy();
-    }));
 
+  it("should render as blank if null", function() {
+    compileInput('<input type="text" ng:model="age" />');
 
-    it('should allow bindings on ng:required', function() {
-      compile('<input type="text" ng:model="price" ng:required="{{required}}"/>',
-              jqLite(document.body));
-      scope.price = '';
-      scope.required = false;
+    scope.$apply(function() {
+      scope.age = null;
+    });
+
+    expect(scope.age).toBeNull();
+    expect(inputElm.val()).toEqual('');
+  });
+
+
+  describe('pattern', function() {
+
+    it('should validate in-lined pattern', function() {
+      compileInput('<input type="text" ng:model="value" ng:pattern="/^\\d\\d\\d-\\d\\d-\\d\\d\\d\\d$/" />');
       scope.$digest();
-      expect(element).toBeValid();
 
-      scope.price = 'xxx';
+      changeInputValueTo('x000-00-0000x');
+      expect(inputElm).toBeInvalid();
+
+      changeInputValueTo('000-00-0000');
+      expect(inputElm).toBeValid();
+
+      changeInputValueTo('000-00-0000x');
+      expect(inputElm).toBeInvalid();
+
+      changeInputValueTo('123-45-6789');
+      expect(inputElm).toBeValid();
+
+      changeInputValueTo('x');
+      expect(inputElm).toBeInvalid();
+    });
+
+
+    it('should validate pattern from scope', function() {
+      compileInput('<input type="text" ng:model="value" ng:pattern="regexp" />');
+      scope.regexp = /^\d\d\d-\d\d-\d\d\d\d$/;
       scope.$digest();
-      expect(element).toBeValid();
 
-      scope.price = '';
-      scope.required =  true;
+      changeInputValueTo('x000-00-0000x');
+      expect(inputElm).toBeInvalid();
+
+      changeInputValueTo('000-00-0000');
+      expect(inputElm).toBeValid();
+
+      changeInputValueTo('000-00-0000x');
+      expect(inputElm).toBeInvalid();
+
+      changeInputValueTo('123-45-6789');
+      expect(inputElm).toBeValid();
+
+      changeInputValueTo('x');
+      expect(inputElm).toBeInvalid();
+
+      scope.regexp = /abc?/;
+
+      changeInputValueTo('ab');
+      expect(inputElm).toBeValid();
+
+      changeInputValueTo('xx');
+      expect(inputElm).toBeInvalid();
+    });
+
+
+    xit('should throw an error when scope pattern can\'t be found', function() {
+      compileInput('<input type="text" ng:model="foo" ng:pattern="fooRegexp" />');
+
+      expect(function() { changeInputValueTo('xx'); }).
+          toThrow('Expected fooRegexp to be a RegExp but was undefined');
+    });
+  });
+
+
+  describe('minlength', function() {
+
+    it('should invalid shorter than given minlenght', function() {
+      compileInput('<input type="text" ng:model="value" ng:minlength="3" />');
+
+      changeInputValueTo('aa');
+      expect(scope.value).toBeUndefined();
+
+      changeInputValueTo('aaa');
+      expect(scope.value).toBe('aaa');
+    });
+  });
+
+
+  describe('maxlength', function() {
+
+    it('should invalid shorter than given maxlenght', function() {
+      compileInput('<input type="text" ng:model="value" ng:maxlength="5" />');
+
+      changeInputValueTo('aaaaaaaa');
+      expect(scope.value).toBeUndefined();
+
+      changeInputValueTo('aaa');
+      expect(scope.value).toBe('aaa');
+    });
+  });
+
+
+  // INPUT TYPES
+
+  describe('number', function() {
+
+    it('should not update model if view invalid', function() {
+      compileInput('<input type="number" ng:model="age"/>');
+
+      scope.$apply(function() {
+        scope.age = 123;
+      });
+      expect(inputElm.val()).toBe('123');
+
+      try {
+        // to allow non-number values, we have to change type so that
+        // the browser which have number validation will not interfere with
+        // this test. IE8 won't allow it hence the catch.
+        inputElm[0].setAttribute('type', 'text');
+      } catch (e) {}
+
+      changeInputValueTo('123X');
+      expect(inputElm.val()).toBe('123X');
+      expect(scope.age).toBe(123);
+      expect(inputElm).toBeInvalid();
+    });
+
+
+    it('should render as blank if null', function() {
+      compileInput('<input type="number" ng:model="age" />');
+
+      scope.$apply(function() {
+        scope.age = null;
+      });
+
+      expect(scope.age).toBeNull();
+      expect(inputElm.val()).toEqual('');
+    });
+
+
+    it('should come up blank when no value specified', function() {
+      compileInput('<input type="number" ng:model="age" />');
+
       scope.$digest();
-      expect(element).toBeInvalid();
+      expect(inputElm.val()).toBe('');
+
+      scope.$apply(function() {
+        scope.age = null;
+      });
 
-      element.val('abc');
-      browserTrigger(element);
-      defer.flush();
-      expect(element).toBeValid();
+      expect(scope.age).toBeNull();
+      expect(inputElm.val()).toBe('');
     });
 
 
-    describe('textarea', function() {
-      it("should process textarea", function() {
-        compile('<textarea ng:model="name"></textarea>');
+    it('should parse empty string to null', function() {
+      compileInput('<input type="number" ng:model="age" />');
 
-        scope.name = 'Adam';
+      scope.$apply(function() {
+        scope.age = 10;
+      });
+
+      changeInputValueTo('');
+      expect(scope.age).toBeNull();
+      expect(inputElm).toBeValid();
+    });
+
+
+    describe('min', function() {
+
+      it('should validate', function() {
+        compileInput('<input type="number" ng:model="value" name="alias" min="10" />');
         scope.$digest();
-        expect(element.val()).toEqual("Adam");
 
-        element.val('Shyam');
-        browserTrigger(element);
-        defer.flush();
-        expect(scope.name).toEqual('Shyam');
+        changeInputValueTo('1');
+        expect(inputElm).toBeInvalid();
+        expect(scope.value).toBeFalsy();
+        expect(scope.form.alias.error.MIN).toBeTruthy();
 
-        element.val('Kai');
-        browserTrigger(element);
-        defer.flush();
-        expect(scope.name).toEqual('Kai');
+        changeInputValueTo('100');
+        expect(inputElm).toBeValid();
+        expect(scope.value).toBe(100);
+        expect(scope.form.alias.error.MIN).toBeFalsy();
       });
     });
 
 
-    describe('radio', function() {
-      it('should support type="radio"', function() {
-        compile('<div>' +
-            '<input type="radio" name="r" ng:model="chose" value="A"/>' +
-            '<input type="radio" name="r" ng:model="chose" value="B"/>' +
-            '<input type="radio" name="r" ng:model="chose" value="C"/>' +
-        '</div>');
-        var a = element[0].childNodes[0];
-        var b = element[0].childNodes[1];
-        expect(b.name.split('@')[1]).toEqual('r');
-        scope.chose = 'A';
-        scope.$digest();
-        expect(a.checked).toBe(true);
+    describe('max', function() {
 
-        scope.chose = 'B';
+      it('should validate', function() {
+        compileInput('<input type="number" ng:model="value" name="alias" max="10" />');
         scope.$digest();
-        expect(a.checked).toBe(false);
-        expect(b.checked).toBe(true);
-        expect(scope.clicked).not.toBeDefined();
 
-        browserTrigger(a);
-        expect(scope.chose).toEqual('A');
+        changeInputValueTo('20');
+        expect(inputElm).toBeInvalid();
+        expect(scope.value).toBeFalsy();
+        expect(scope.form.alias.error.MAX).toBeTruthy();
+
+        changeInputValueTo('0');
+        expect(inputElm).toBeValid();
+        expect(scope.value).toBe(0);
+        expect(scope.form.alias.error.MAX).toBeFalsy();
       });
+    });
 
 
-      it('should honor model over html checked keyword after', function() {
-        compile('<div ng:init="choose=\'C\'">' +
-            '<input type="radio" ng:model="choose" value="A""/>' +
-            '<input type="radio" ng:model="choose" value="B" checked/>' +
-            '<input type="radio" ng:model="choose" value="C"/>' +
-        '</div>');
+    describe('required', function() {
 
-        expect(scope.choose).toEqual('C');
-        var inputs = element.find('input');
-        expect(inputs[1].checked).toBe(false);
-        expect(inputs[2].checked).toBe(true);
+      it('should be valid even if value is 0', function() {
+        compileInput('<input type="number" ng:model="value" name="alias" required />');
+
+        changeInputValueTo('0');
+        expect(inputElm).toBeValid();
+        expect(scope.value).toBe(0);
+        expect(scope.form.alias.error.REQUIRED).toBeFalsy();
       });
 
+      it('should be valid even if value 0 is set from model', function() {
+        compileInput('<input type="number" ng:model="value" name="alias" required />');
 
-      it('should honor model over html checked keyword before', function() {
-        compile('<div ng:init="choose=\'A\'">' +
-            '<input type="radio" ng:model="choose" value="A""/>' +
-            '<input type="radio" ng:model="choose" value="B" checked/>' +
-            '<input type="radio" ng:model="choose" value="C"/>' +
-        '</div>');
+        scope.$apply(function() {
+          scope.value = 0;
+        });
 
-        expect(scope.choose).toEqual('A');
-        var inputs = element.find('input');
-        expect(inputs[0].checked).toBe(true);
-        expect(inputs[1].checked).toBe(false);
+        expect(inputElm).toBeValid();
+        expect(inputElm.val()).toBe('0')
+        expect(scope.form.alias.error.REQUIRED).toBeFalsy();
       });
+    });
+  });
 
+  describe('email', function() {
 
-      it('it should work with value attribute that is data-bound', function(){
-        compile(
-            '<li>'+
-              '<input ng:repeat="item in [\'a\', \'b\']" ' +
-              '       type="radio" ng:model="choice" value="{{item}}" name="choice">'+
-            '</li>');
+    it('should validate e-mail', function() {
+      compileInput('<input type="email" ng:model="email" name="alias" />');
 
-        var inputs = element.find('input');
-        expect(inputs[0].checked).toBe(false);
-        expect(inputs[1].checked).toBe(false);
+      var widget = scope.form.alias;
+      changeInputValueTo('vojta@google.com');
 
-        scope.choice = 'b';
-        scope.$digest();
-        expect(inputs[0].checked).toBe(false);
-        expect(inputs[1].checked).toBe(true);
+      expect(scope.email).toBe('vojta@google.com');
+      expect(inputElm).toBeValid();
+      expect(widget.error.EMAIL).toBeUndefined();
+
+      changeInputValueTo('invalid@');
+      expect(scope.email).toBe('vojta@google.com');
+      expect(inputElm).toBeInvalid();
+      expect(widget.error.EMAIL).toBeTruthy();
+    });
+
+
+    describe('EMAIL_REGEXP', function() {
+
+      it('should validate email', function() {
+        expect(EMAIL_REGEXP.test('a@b.com')).toBe(true);
+        expect(EMAIL_REGEXP.test('a@B.c')).toBe(false);
       });
+    });
+  });
+
+
+  describe('url', function() {
 
-      it('should data-bind the value attribute on initialization', inject(
-          function($rootScope, $compile){
-        $rootScope.choice = 'b';
-        $rootScope.items = ['a', 'b'];
-        element = $compile(
-            '<li>'+
-              '<input ng:repeat="item in items" ' +
-              '       type="radio" ng:model="choice" value="{{item}}" name="choice">'+
-            '</li>')($rootScope);
+    it('should validate url', function() {
+      compileInput('<input type="url" ng:model="url" name="alias" />');
+      var widget = scope.form.alias;
 
-        $rootScope.$digest();
-        var inputs = element.find('input');
-        expect(inputs[0].checked).toBe(false);
-        expect(inputs[1].checked).toBe(true);
-      }));
+      changeInputValueTo('http://www.something.com');
+      expect(scope.url).toBe('http://www.something.com');
+      expect(inputElm).toBeValid();
+      expect(widget.error.URL).toBeUndefined();
+
+      changeInputValueTo('invalid.com');
+      expect(scope.url).toBe('http://www.something.com');
+      expect(inputElm).toBeInvalid();
+      expect(widget.error.URL).toBeTruthy();
     });
 
 
-    describe('password', function () {
-      it('should not change password type to text', function () {
-        compile('<input type="password" ng:model="name" >');
-        expect(element.attr('type')).toBe('password');
+    describe('URL_REGEXP', function() {
+
+      it('should validate url', function() {
+        expect(URL_REGEXP.test('http://server:123/path')).toBe(true);
+        expect(URL_REGEXP.test('a@B.c')).toBe(false);
       });
     });
+  });
+
 
-    describe('number', function(){
-      it('should clear number on non-number', inject(function($compile, $rootScope){
-        $rootScope.value = 123;
-        var element = $compile('<input type="number" ng:model="value" >')($rootScope);
-        $rootScope.$digest();
-        expect(element.val()).toEqual('123');
-        $rootScope.value = undefined;
-        $rootScope.$digest();
-        expect(element.val()).toEqual('');
-        dealoc(element);
-      }));
+  describe('radio', function() {
+
+    it('should update the model', function() {
+      compileInput(
+          '<input type="radio" ng:model="color" value="white" />' +
+          '<input type="radio" ng:model="color" value="red" />' +
+          '<input type="radio" ng:model="color" value="blue" />');
+
+      scope.$apply(function() {
+        scope.color = 'white';
+      });
+      expect(inputElm[0].checked).toBe(true);
+      expect(inputElm[1].checked).toBe(false);
+      expect(inputElm[2].checked).toBe(false);
+
+      scope.$apply(function() {
+        scope.color = 'red';
+      });
+      expect(inputElm[0].checked).toBe(false);
+      expect(inputElm[1].checked).toBe(true);
+      expect(inputElm[2].checked).toBe(false);
+
+      browserTrigger(inputElm[2]);
+      expect(scope.color).toBe('blue');
     });
 
 
-    it('should ignore text widget which have no name', function() {
-      compile('<input type="text"/>');
-      expect(element.attr('ng-exception')).toBeFalsy();
-      expect(element.hasClass('ng-exception')).toBeFalsy();
+    // TODO(vojta): change interpolate ?
+    xit('should allow {{expr}} as value', function() {
+      scope.some = 11;
+      compileInput(
+          '<input type="radio" ng:model="value" value="{{some}}" />' +
+          '<input type="radio" ng:model="value" value="{{other}}" />');
+
+      browserTrigger(inputElm[0]);
+      expect(scope.value).toBe(true);
+
+      browserTrigger(inputElm[1]);
+      expect(scope.value).toBe(false);
     });
+  });
 
 
-    it('should ignore checkbox widget which have no name', function() {
-      compile('<input type="checkbox"/>');
-      expect(element.attr('ng-exception')).toBeFalsy();
-      expect(element.hasClass('ng-exception')).toBeFalsy();
+  describe('checkbox', function() {
+
+    it('should ignore checkbox without ng:model attr', function() {
+      compileInput('<input type="checkbox" name="whatever" required />');
+
+      browserTrigger(inputElm, 'blur');
+      expect(inputElm.hasClass('ng-valid')).toBe(false);
+      expect(inputElm.hasClass('ng-invalid')).toBe(false);
+      expect(inputElm.hasClass('ng-pristine')).toBe(false);
+      expect(inputElm.hasClass('ng-dirty')).toBe(false);
     });
 
 
-    it('should report error on assignment error', inject(function($log) {
-      expect(function() {
-        compile('<input type="text" ng:model="throw \'\'">');
-      }).toThrow("Syntax Error: Token '''' is an unexpected token at column 7 of the expression [throw ''] starting at [''].");
-      $log.error.logs.shift();
-    }));
+    it('should format booleans', function() {
+      compileInput('<input type="checkbox" ng:model="name" />');
+
+      scope.$apply(function() {
+        scope.name = false;
+      });
+      expect(inputElm[0].checked).toBe(false);
+
+      scope.$apply(function() {
+        scope.name = true;
+      });
+      expect(inputElm[0].checked).toBe(true);
+    });
+
+
+    it('should support type="checkbox" with non-standard capitalization', function() {
+      compileInput('<input type="checkBox" ng:model="checkbox" />');
+
+      browserTrigger(inputElm, 'click');
+      expect(scope.checkbox).toBe(true);
+
+      browserTrigger(inputElm, 'click');
+      expect(scope.checkbox).toBe(false);
+    });
+
+
+    it('should allow custom enumeration', function() {
+      compileInput('<input type="checkbox" ng:model="name" ng:true-value="y" ' +
+          'ng:false-value="n">');
+
+      scope.$apply(function() {
+        scope.name = 'y';
+      });
+      expect(inputElm[0].checked).toBe(true);
+
+      scope.$apply(function() {
+        scope.name = 'n';
+      });
+      expect(inputElm[0].checked).toBe(false);
+
+      scope.$apply(function() {
+        scope.name = 'something else';
+      });
+      expect(inputElm[0].checked).toBe(false);
+
+      browserTrigger(inputElm, 'click');
+      expect(scope.name).toEqual('y');
+
+      browserTrigger(inputElm, 'click');
+      expect(scope.name).toEqual('n');
+    });
   });
 
 
-  describe('scope declaration', function() {
-    it('should read the declaration from scope', inject(function($rootScope, $compile, $formFactory) {
-      var input, formFactory;
-      var element = angular.element('<input type="@MyType" ng:model="abc">');
-      $rootScope.MyType = function($f, i) {
-        input = i;
-        formFactory = $f;
-      };
-      $rootScope.MyType.$inject = ['$formFactory', '$element'];
+  describe('textarea', function() {
 
-      $compile(element)($rootScope);
+    it("should process textarea", function() {
+      compileInput('<textarea ng:model="name"></textarea>');
+      inputElm = formElm.find('textarea');
 
-      expect(formFactory).toBe($formFactory);
-      expect(input[0]).toBe(element[0]);
-      dealoc(element);
-    }));
+      scope.$apply(function() {
+        scope.name = 'Adam';
+      });
+      expect(inputElm.val()).toEqual('Adam');
 
-    it('should throw an error of Controller not declared in scope', inject(function($rootScope, $compile) {
-      var input;
-      var element = angular.element('<input type="@DontExist" ng:model="abc">');
-      var error;
-      try {
-        $compile(element)($rootScope);
-        error = 'no error thrown';
-      } catch (e) {
-        error = e;
-      }
-      expect(error.message).toEqual("Argument 'DontExist' is not a function, got undefined");
-    }));
+      changeInputValueTo('Shyam');
+      expect(scope.name).toEqual('Shyam');
+
+      changeInputValueTo('Kai');
+      expect(scope.name).toEqual('Kai');
+    });
+
+
+    it('should ignore textarea without ng:model attr', function() {
+      compileInput('<textarea name="whatever" required></textarea>');
+      inputElm = formElm.find('textarea');
+
+      browserTrigger(inputElm, 'blur');
+      expect(inputElm.hasClass('ng-valid')).toBe(false);
+      expect(inputElm.hasClass('ng-invalid')).toBe(false);
+      expect(inputElm.hasClass('ng-pristine')).toBe(false);
+      expect(inputElm.hasClass('ng-dirty')).toBe(false);
+    });
   });
 
 
-  describe('text subtypes', function() {
+  describe('ng:list', function() {
 
-    function itShouldVerify(type, validList, invalidList, params, fn) {
-      describe(type, function() {
-        forEach(validList, function(value){
-          it('should validate "' + value + '"', function() {
-            setup(value);
-            expect(element).toBeValid();
-          });
-        });
-        forEach(invalidList, function(value){
-          it('should NOT validate "' + value + '"', function() {
-            setup(value);
-            expect(element).toBeInvalid();
-          });
-        });
+    it('should parse text into an array', function() {
+      compileInput('<input type="text" ng:model="list" ng:list />');
 
-        function setup(value){
-          var html = ['<input type="', type.split(' ')[0], '" '];
-          forEach(params||{}, function(value, key){
-            html.push(key + '="' + value + '" ');
-          });
-          html.push('ng:model="value">');
-          compile(html.join(''));
-          (fn||noop)(scope);
-          scope.value = null;
-          try {
-            // to allow non-number values, we have to change type so that
-            // the browser which have number validation will not interfere with
-            // this test. IE8 won't allow it hence the catch.
-            element[0].setAttribute('type', 'text');
-          } catch (e){}
-          if (value != undefined) {
-            element.val(value);
-            browserTrigger(element, 'keydown');
-            defer.flush();
-          }
-          scope.$digest();
-        }
+      // model -> view
+      scope.$apply(function() {
+        scope.list = ['x', 'y', 'z'];
       });
-    }
+      expect(inputElm.val()).toBe('x, y, z');
 
+      // view -> model
+      changeInputValueTo('1, 2, 3');
+      expect(scope.list).toEqual(['1', '2', '3']);
+    });
 
-    itShouldVerify('email', ['a@b.com'], ['a@B.c']);
 
+    it("should not clobber text if model changes due to itself", function() {
+      // When the user types 'a,b' the 'a,' stage parses to ['a'] but if the
+      // $parseModel function runs it will change to 'a', in essence preventing
+      // the user from ever typying ','.
+      compileInput('<input type="text" ng:model="list" ng:list />');
 
-    itShouldVerify('url', ['http://server:123/path'], ['a@b.c']);
+      changeInputValueTo('a ');
+      expect(inputElm.val()).toEqual('a ');
+      expect(scope.list).toEqual(['a']);
 
+      changeInputValueTo('a ,');
+      expect(inputElm.val()).toEqual('a ,');
+      expect(scope.list).toEqual(['a']);
 
-    itShouldVerify('number',
-        ['', '1', '12.34', '-4', '+13', '.1'],
-        ['x', '12b', '-6', '101'],
-        {min:-5, max:100});
+      changeInputValueTo('a , ');
+      expect(inputElm.val()).toEqual('a , ');
+      expect(scope.list).toEqual(['a']);
 
+      changeInputValueTo('a , b');
+      expect(inputElm.val()).toEqual('a , b');
+      expect(scope.list).toEqual(['a', 'b']);
+    });
 
-    itShouldVerify('integer',
-        [null, '', '1', '12', '-4', '+13'],
-        ['x', '12b', '-6', '101', '1.', '1.2'],
-        {min:-5, max:100});
 
+    xit('should require at least one item', function() {
+      compileInput('<input type="text" ng:model="list" ng:list required />');
 
-    itShouldVerify('integer',
-        [null, '', '0', '1'],
-        ['-1', '2'],
-        {min:0, max:1});
+      changeInputValueTo(' , ');
+      expect(inputElm).toBeInvalid();
+    });
 
 
-    itShouldVerify('text with inlined pattern constraint',
-        ['', '000-00-0000', '123-45-6789'],
-        ['x000-00-0000x', 'x000-00-0000', '000-00-0000x', 'x'],
-        {'ng:pattern':'/^\\d\\d\\d-\\d\\d-\\d\\d\\d\\d$/'});
+    it('should convert empty string to an empty array', function() {
+      compileInput('<input type="text" ng:model="list" ng:list />');
 
+      changeInputValueTo('');
+      expect(scope.list).toEqual([]);
+    });
+  });
+
+  describe('required', function() {
+
+    it('should allow bindings on required', function() {
+      compileInput('<input type="text" ng:model="value" required="{{required}}" />');
+
+      scope.$apply(function() {
+        scope.required = false;
+      });
+
+      changeInputValueTo('');
+      expect(inputElm).toBeValid();
+
+
+      scope.$apply(function() {
+        scope.required = true;
+      });
+      expect(inputElm).toBeInvalid();
+
+      scope.$apply(function() {
+        scope.value = 'some';
+      });
+      expect(inputElm).toBeValid();
+
+      changeInputValueTo('');
+      expect(inputElm).toBeInvalid();
+
+      scope.$apply(function() {
+        scope.required = false;
+      });
+      expect(inputElm).toBeValid();
+    });
+
+
+    it('should invalid initial value with bound required', function() {
+      compileInput('<input type="text" ng:model="value" required="{{required}}" />');
+
+      scope.$apply(function() {
+        scope.required = true;
+      });
+
+      expect(inputElm).toBeInvalid();
+    });
+
+
+    it('should be $invalid but $pristine if not touched', function() {
+      compileInput('<input type="text" ng:model="name" name="alias" required />');
+
+      scope.$apply(function() {
+        scope.name = '';
+      });
+
+      expect(inputElm).toBeInvalid();
+      expect(inputElm).toBePristine();
+
+      changeInputValueTo('');
+      expect(inputElm).toBeInvalid();
+      expect(inputElm).toBeDirty();
+    });
+
+
+    it('should allow empty string if not required', function() {
+      compileInput('<input type="text" ng:model="foo" />');
+      changeInputValueTo('a');
+      changeInputValueTo('');
+      expect(scope.foo).toBe('');
+    });
+
+
+    it('should set $invalid when model undefined', function() {
+      compileInput('<input type="text" ng:model="notDefiend" required />');
+      scope.$digest();
+      expect(inputElm).toBeInvalid();
+    })
+  });
+
+
+  describe('ng:change', function() {
+
+    it('should $eval expression after new value is set in the model', function() {
+      compileInput('<input type="text" ng:model="value" ng:change="change()" />');
+
+      scope.change = jasmine.createSpy('change').andCallFake(function() {
+        expect(scope.value).toBe('new value');
+      });
+
+      changeInputValueTo('new value');
+      expect(scope.change).toHaveBeenCalledOnce();
+    });
+
+    it('should not $eval the expression if changed from model', function() {
+      compileInput('<input type="text" ng:model="value" ng:change="change()" />');
+
+      scope.change = jasmine.createSpy('change');
+      scope.$apply(function() {
+        scope.value = true;
+      });
+
+      expect(scope.change).not.toHaveBeenCalled();
+    });
+
+
+    it('should $eval ng:change expression on checkbox', function() {
+      compileInput('<input type="checkbox" ng:model="foo" ng:change="changeFn()">');
+
+      scope.changeFn = jasmine.createSpy('changeFn');
+      scope.$digest();
+      expect(scope.changeFn).not.toHaveBeenCalled();
+
+      browserTrigger(inputElm, 'click');
+      expect(scope.changeFn).toHaveBeenCalledOnce();
+    });
+  });
 
-    itShouldVerify('text with pattern constraint on scope',
-        ['', '000-00-0000', '123-45-6789'],
-        ['x000-00-0000x', 'x'],
-        {'ng:pattern':'regexp'}, function(scope){
-          scope.regexp = /^\d\d\d-\d\d-\d\d\d\d$/;
-        });
 
+  describe('ng:bind-change', function() {
 
-    itShouldVerify('text with ng:minlength limit',
-        ['', 'aaa', 'aaaaa', 'aaaaaaaaa'],
-        ['a', 'aa'],
-        {'ng:minlength': 3});
+    it('should bind keydown, change, input events', inject(function($browser) {
+      compileInput('<input type="text" ng:model="value" ng:bind-immediate />');
 
+      inputElm.val('value1');
+      browserTrigger(inputElm, 'keydown');
 
-    itShouldVerify('text with ng:maxlength limit',
-        ['', 'a', 'aa', 'aaa'],
-        ['aaaa', 'aaaaa', 'aaaaaaaaa'],
-        {'ng:maxlength': 3});
+      // should be async (because of keydown)
+      expect(scope.value).toBeUndefined();
 
+      $browser.defer.flush();
+      expect(scope.value).toBe('value1');
 
-    it('should throw an error when scope pattern can\'t be found', inject(function($rootScope, $compile) {
-      var el = jqLite('<input ng:model="foo" ng:pattern="fooRegexp">');
-      $compile(el)($rootScope);
+      inputElm.val('value2');
+      browserTrigger(inputElm, 'change');
+      $browser.defer.flush();
+      expect(scope.value).toBe('value2');
 
-      el.val('xx');
-      browserTrigger(el, 'keydown');
-      expect(function() { defer.flush(); }).
-        toThrow('Expected fooRegexp to be a RegExp but was undefined');
+      if (msie < 9) return;
 
-      dealoc(el);
+      inputElm.val('value3');
+      browserTrigger(inputElm, 'input');
+      $browser.defer.flush();
+      expect(scope.value).toBe('value3');
     }));
   });
 });
diff --git a/test/widget/selectSpec.js b/test/widget/selectSpec.js
index 00bc2192..9db47c05 100644
--- a/test/widget/selectSpec.js
+++ b/test/widget/selectSpec.js
@@ -1,60 +1,69 @@
 'use strict';
 
 describe('select', function() {
-  var compile = null, element = null, scope = null;
+  var scope, formElement, element, $compile;
 
-  beforeEach(inject(function($compile, $rootScope) {
+  function compile(html) {
+    formElement = jqLite('<form name="form">' + html + '</form>');
+    element = formElement.find('select');
+    $compile(formElement)(scope);
+    scope.$apply();
+  }
+
+  beforeEach(inject(function($injector, $rootScope) {
     scope = $rootScope;
-    element = null;
-    compile = function(html, parent) {
-      if (parent) {
-        parent.html(html);
-        element = parent.children();
-      } else {
-        element = jqLite(html);
-      }
-      element = $compile(element)($rootScope);
-      scope.$apply();
-      return scope;
-    };
+    $compile = $injector.get('$compile');
+    formElement = element = null;
   }));
 
   afterEach(function() {
-    dealoc(element);
+    dealoc(formElement);
   });
 
 
   describe('select-one', function() {
 
-    it('should compile children of a select without a name, but not create a model for it',
+    it('should compile children of a select without a ng:model, but not create a model for it',
         function() {
       compile('<select>' +
                 '<option selected="true">{{a}}</option>' +
                 '<option value="">{{b}}</option>' +
                 '<option>C</option>' +
               '</select>');
-      scope.a = 'foo';
-      scope.b = 'bar';
-      scope.$digest();
+      scope.$apply(function() {
+        scope.a = 'foo';
+        scope.b = 'bar';
+      });
 
       expect(element.text()).toBe('foobarC');
     });
 
-    it('should require', inject(function($formFactory) {
-      compile('<select name="select" ng:model="selection" required ng:change="log=log+\'change;\'">' +
+
+    it('should require', function() {
+      compile(
+        '<select name="select" ng:model="selection" required ng:change="change()">' +
           '<option value=""></option>' +
           '<option value="c">C</option>' +
         '</select>');
-      scope.log = '';
-      scope.selection = 'c';
-      scope.$digest();
-      expect($formFactory.forElement(element).select.$error.REQUIRED).toEqual(undefined);
+
+      scope.change = function() {
+        scope.log += 'change;';
+      };
+
+      scope.$apply(function() {
+        scope.log = '';
+        scope.selection = 'c';
+      });
+
+      expect(scope.form.select.error.REQUIRED).toBeFalsy();
       expect(element).toBeValid();
       expect(element).toBePristine();
 
-      scope.selection = '';
-      scope.$digest();
-      expect($formFactory.forElement(element).select.$error.REQUIRED).toEqual(true);
+      scope.$apply(function() {
+        scope.selection = '';
+      });
+
+      expect(scope.form.select.error.REQUIRED).toBeTruthy();
       expect(element).toBeInvalid();
       expect(element).toBePristine();
       expect(scope.log).toEqual('');
@@ -64,10 +73,12 @@ describe('select', function() {
       expect(element).toBeValid();
       expect(element).toBeDirty();
       expect(scope.log).toEqual('change;');
-    }));
+    });
+
 
     it('should not be invalid if no require', function() {
-      compile('<select name="select" ng:model="selection">' +
+      compile(
+        '<select name="select" ng:model="selection">' +
           '<option value=""></option>' +
           '<option value="c">C</option>' +
         '</select>');
@@ -75,35 +86,45 @@ describe('select', function() {
       expect(element).toBeValid();
       expect(element).toBePristine();
     });
-
   });
 
 
   describe('select-multiple', function() {
+
     it('should support type="select-multiple"', function() {
-      compile('<select ng:model="selection" multiple>' +
-                '<option>A</option>' +
-                '<option>B</option>' +
-              '</select>');
-      scope.selection = ['A'];
-      scope.$digest();
+      compile(
+        '<select ng:model="selection" multiple>' +
+          '<option>A</option>' +
+          '<option>B</option>' +
+        '</select>');
+
+      scope.$apply(function() {
+        scope.selection = ['A'];
+      });
+
       expect(element[0].childNodes[0].selected).toEqual(true);
     });
 
-    it('should require', inject(function($formFactory) {
-      compile('<select name="select" ng:model="selection" multiple required>' +
+
+    it('should require', function() {
+      compile(
+        '<select name="select" ng:model="selection" multiple required>' +
           '<option>A</option>' +
           '<option>B</option>' +
         '</select>');
 
-      scope.selection = [];
-      scope.$digest();
-      expect($formFactory.forElement(element).select.$error.REQUIRED).toEqual(true);
+      scope.$apply(function() {
+        scope.selection = [];
+      });
+
+      expect(scope.form.select.error.REQUIRED).toBeTruthy();
       expect(element).toBeInvalid();
       expect(element).toBePristine();
 
-      scope.selection = ['A'];
-      scope.$digest();
+      scope.$apply(function() {
+        scope.selection = ['A'];
+      });
+
       expect(element).toBeValid();
       expect(element).toBePristine();
 
@@ -111,17 +132,14 @@ describe('select', function() {
       browserTrigger(element, 'change');
       expect(element).toBeValid();
       expect(element).toBeDirty();
-    }));
-
+    });
   });
 
 
   describe('ng:options', function() {
-    var select, scope;
-
-    function createSelect(attrs, blank, unknown){
+    function createSelect(attrs, blank, unknown) {
       var html = '<select';
-      forEach(attrs, function(value, key){
+      forEach(attrs, function(value, key) {
         if (isBoolean(value)) {
           if (value) html += ' ' + key;
         } else {
@@ -132,18 +150,18 @@ describe('select', function() {
         (blank ? (isString(blank) ? blank : '<option value="">blank</option>') : '') +
         (unknown ? (isString(unknown) ? unknown : '<option value="?">unknown</option>') : '') +
       '</select>';
-      select = jqLite(html);
-      scope = compile(select);
+
+      compile(html);
     }
 
-    function createSingleSelect(blank, unknown){
+    function createSingleSelect(blank, unknown) {
       createSelect({
         'ng:model':'selected',
         'ng:options':'value.name for value in values'
       }, blank, unknown);
     }
 
-    function createMultiSelect(blank, unknown){
+    function createMultiSelect(blank, unknown) {
       createSelect({
         'ng:model':'selected',
         'multiple':true,
@@ -151,366 +169,474 @@ describe('select', function() {
       }, blank, unknown);
     }
 
-    afterEach(function() {
-      dealoc(select);
-      dealoc(scope);
-    });
 
-    it('should throw when not formated "? for ? in ?"', inject(function($rootScope, $exceptionHandler) {
+    it('should throw when not formated "? for ? in ?"', function() {
       expect(function() {
         compile('<select ng:model="selected" ng:options="i dont parse"></select>');
       }).toThrow("Expected ng:options in form of '_select_ (as _label_)? for (_key_,)?_value_ in" +
                  " _collection_' but got 'i dont parse'.");
-    }));
+    });
+
 
     it('should render a list', function() {
       createSingleSelect();
-      scope.values = [{name:'A'}, {name:'B'}, {name:'C'}];
-      scope.selected = scope.values[0];
-      scope.$digest();
-      var options = select.find('option');
+
+      scope.$apply(function() {
+        scope.values = [{name: 'A'}, {name: 'B'}, {name: 'C'}];
+        scope.selected = scope.values[0];
+      });
+
+      var options = element.find('option');
       expect(options.length).toEqual(3);
       expect(sortedHtml(options[0])).toEqual('<option value="0">A</option>');
       expect(sortedHtml(options[1])).toEqual('<option value="1">B</option>');
       expect(sortedHtml(options[2])).toEqual('<option value="2">C</option>');
     });
 
+
     it('should render an object', function() {
       createSelect({
-        'ng:model':'selected',
+        'ng:model': 'selected',
         'ng:options': 'value as key for (key, value) in object'
       });
-      scope.object = {'red':'FF0000', 'green':'00FF00', 'blue':'0000FF'};
-      scope.selected = scope.object.red;
-      scope.$digest();
-      var options = select.find('option');
+
+      scope.$apply(function() {
+        scope.object = {'red': 'FF0000', 'green': '00FF00', 'blue': '0000FF'};
+        scope.selected = scope.object.red;
+      });
+
+      var options = element.find('option');
       expect(options.length).toEqual(3);
       expect(sortedHtml(options[0])).toEqual('<option value="blue">blue</option>');
       expect(sortedHtml(options[1])).toEqual('<option value="green">green</option>');
       expect(sortedHtml(options[2])).toEqual('<option value="red">red</option>');
       expect(options[2].selected).toEqual(true);
 
-      scope.object.azur = '8888FF';
-      scope.$digest();
-      options = select.find('option');
+      scope.$apply(function() {
+        scope.object.azur = '8888FF';
+      });
+
+      options = element.find('option');
       expect(options[3].selected).toEqual(true);
     });
 
+
     it('should grow list', function() {
       createSingleSelect();
-      scope.values = [];
-      scope.$digest();
-      expect(select.find('option').length).toEqual(1); // because we add special empty option
-      expect(sortedHtml(select.find('option')[0])).toEqual('<option value="?"></option>');
-
-      scope.values.push({name:'A'});
-      scope.selected = scope.values[0];
-      scope.$digest();
-      expect(select.find('option').length).toEqual(1);
-      expect(sortedHtml(select.find('option')[0])).toEqual('<option value="0">A</option>');
-
-      scope.values.push({name:'B'});
-      scope.$digest();
-      expect(select.find('option').length).toEqual(2);
-      expect(sortedHtml(select.find('option')[0])).toEqual('<option value="0">A</option>');
-      expect(sortedHtml(select.find('option')[1])).toEqual('<option value="1">B</option>');
+
+      scope.$apply(function() {
+        scope.values = [];
+      });
+
+      expect(element.find('option').length).toEqual(1); // because we add special empty option
+      expect(sortedHtml(element.find('option')[0])).toEqual('<option value="?"></option>');
+
+      scope.$apply(function() {
+        scope.values.push({name:'A'});
+        scope.selected = scope.values[0];
+      });
+
+      expect(element.find('option').length).toEqual(1);
+      expect(sortedHtml(element.find('option')[0])).toEqual('<option value="0">A</option>');
+
+      scope.$apply(function() {
+        scope.values.push({name:'B'});
+      });
+
+      expect(element.find('option').length).toEqual(2);
+      expect(sortedHtml(element.find('option')[0])).toEqual('<option value="0">A</option>');
+      expect(sortedHtml(element.find('option')[1])).toEqual('<option value="1">B</option>');
     });
 
+
     it('should shrink list', function() {
       createSingleSelect();
-      scope.values = [{name:'A'}, {name:'B'}, {name:'C'}];
-      scope.selected = scope.values[0];
-      scope.$digest();
-      expect(select.find('option').length).toEqual(3);
-
-      scope.values.pop();
-      scope.$digest();
-      expect(select.find('option').length).toEqual(2);
-      expect(sortedHtml(select.find('option')[0])).toEqual('<option value="0">A</option>');
-      expect(sortedHtml(select.find('option')[1])).toEqual('<option value="1">B</option>');
-
-      scope.values.pop();
-      scope.$digest();
-      expect(select.find('option').length).toEqual(1);
-      expect(sortedHtml(select.find('option')[0])).toEqual('<option value="0">A</option>');
-
-      scope.values.pop();
-      scope.selected = null;
-      scope.$digest();
-      expect(select.find('option').length).toEqual(1); // we add back the special empty option
+
+      scope.$apply(function() {
+        scope.values = [{name:'A'}, {name:'B'}, {name:'C'}];
+        scope.selected = scope.values[0];
+      });
+
+      expect(element.find('option').length).toEqual(3);
+
+      scope.$apply(function() {
+        scope.values.pop();
+      });
+
+      expect(element.find('option').length).toEqual(2);
+      expect(sortedHtml(element.find('option')[0])).toEqual('<option value="0">A</option>');
+      expect(sortedHtml(element.find('option')[1])).toEqual('<option value="1">B</option>');
+
+      scope.$apply(function() {
+        scope.values.pop();
+      });
+
+      expect(element.find('option').length).toEqual(1);
+      expect(sortedHtml(element.find('option')[0])).toEqual('<option value="0">A</option>');
+
+      scope.$apply(function() {
+        scope.values.pop();
+        scope.selected = null;
+      });
+
+      expect(element.find('option').length).toEqual(1); // we add back the special empty option
     });
 
+
     it('should shrink and then grow list', function() {
       createSingleSelect();
-      scope.values = [{name:'A'}, {name:'B'}, {name:'C'}];
-      scope.selected = scope.values[0];
-      scope.$digest();
-      expect(select.find('option').length).toEqual(3);
-
-      scope.values = [{name:'1'}, {name:'2'}];
-      scope.selected = scope.values[0];
-      scope.$digest();
-      expect(select.find('option').length).toEqual(2);
-
-      scope.values = [{name:'A'}, {name:'B'}, {name:'C'}];
-      scope.selected = scope.values[0];
-      scope.$digest();
-      expect(select.find('option').length).toEqual(3);
+
+      scope.$apply(function() {
+        scope.values = [{name:'A'}, {name:'B'}, {name:'C'}];
+        scope.selected = scope.values[0];
+      });
+
+      expect(element.find('option').length).toEqual(3);
+
+      scope.$apply(function() {
+        scope.values = [{name: '1'}, {name: '2'}];
+        scope.selected = scope.values[0];
+      });
+
+      expect(element.find('option').length).toEqual(2);
+
+      scope.$apply(function() {
+        scope.values = [{name: 'A'}, {name: 'B'}, {name: 'C'}];
+        scope.selected = scope.values[0];
+      });
+
+      expect(element.find('option').length).toEqual(3);
     });
 
+
     it('should update list', function() {
       createSingleSelect();
-      scope.values = [{name:'A'}, {name:'B'}, {name:'C'}];
-      scope.selected = scope.values[0];
-      scope.$digest();
-
-      scope.values = [{name:'B'}, {name:'C'}, {name:'D'}];
-      scope.selected = scope.values[0];
-      scope.$digest();
-      var options = select.find('option');
+
+      scope.$apply(function() {
+        scope.values = [{name: 'A'}, {name: 'B'}, {name: 'C'}];
+        scope.selected = scope.values[0];
+      });
+
+      scope.$apply(function() {
+        scope.values = [{name: 'B'}, {name: 'C'}, {name: 'D'}];
+        scope.selected = scope.values[0];
+      });
+
+      var options = element.find('option');
       expect(options.length).toEqual(3);
       expect(sortedHtml(options[0])).toEqual('<option value="0">B</option>');
       expect(sortedHtml(options[1])).toEqual('<option value="1">C</option>');
       expect(sortedHtml(options[2])).toEqual('<option value="2">D</option>');
     });
 
+
     it('should preserve existing options', function() {
       createSingleSelect(true);
 
-      scope.values = [];
-      scope.$digest();
-      expect(select.find('option').length).toEqual(1);
-
-      scope.values = [{name:'A'}];
-      scope.selected = scope.values[0];
-      scope.$digest();
-      expect(select.find('option').length).toEqual(2);
-      expect(jqLite(select.find('option')[0]).text()).toEqual('blank');
-      expect(jqLite(select.find('option')[1]).text()).toEqual('A');
-
-      scope.values = [];
-      scope.selected = null;
-      scope.$digest();
-      expect(select.find('option').length).toEqual(1);
-      expect(jqLite(select.find('option')[0]).text()).toEqual('blank');
+      scope.$apply(function() {
+        scope.values = [];
+      });
+
+      expect(element.find('option').length).toEqual(1);
+
+      scope.$apply(function() {
+        scope.values = [{name: 'A'}];
+        scope.selected = scope.values[0];
+      });
+
+      expect(element.find('option').length).toEqual(2);
+      expect(jqLite(element.find('option')[0]).text()).toEqual('blank');
+      expect(jqLite(element.find('option')[1]).text()).toEqual('A');
+
+      scope.$apply(function() {
+        scope.values = [];
+        scope.selected = null;
+      });
+
+      expect(element.find('option').length).toEqual(1);
+      expect(jqLite(element.find('option')[0]).text()).toEqual('blank');
     });
 
+
     describe('binding', function() {
+
       it('should bind to scope value', function() {
         createSingleSelect();
-        scope.values = [{name:'A'}, {name:'B'}];
-        scope.selected = scope.values[0];
-        scope.$digest();
-        expect(select.val()).toEqual('0');
 
-        scope.selected = scope.values[1];
-        scope.$digest();
-        expect(select.val()).toEqual('1');
+        scope.$apply(function() {
+          scope.values = [{name: 'A'}, {name: 'B'}];
+          scope.selected = scope.values[0];
+        });
+
+        expect(element.val()).toEqual('0');
+
+        scope.$apply(function() {
+          scope.selected = scope.values[1];
+        });
+
+        expect(element.val()).toEqual('1');
       });
 
+
       it('should bind to scope value and group', function() {
         createSelect({
-          'ng:model':'selected',
-          'ng:options':'item.name group by item.group for item in values'
-        });
-        scope.values = [{name:'A'},
-                        {name:'B', group:'first'},
-                        {name:'C', group:'second'},
-                        {name:'D', group:'first'},
-                        {name:'E', group:'second'}];
-        scope.selected = scope.values[3];
-        scope.$digest();
-        expect(select.val()).toEqual('3');
+          'ng:model': 'selected',
+          'ng:options': 'item.name group by item.group for item in values'
+        });
+
+        scope.$apply(function() {
+          scope.values = [{name: 'A'},
+                          {name: 'B', group: 'first'},
+                          {name: 'C', group: 'second'},
+                          {name: 'D', group: 'first'},
+                          {name: 'E', group: 'second'}];
+          scope.selected = scope.values[3];
+        });
+
+        expect(element.val()).toEqual('3');
 
-        var first = jqLite(select.find('optgroup')[0]);
+        var first = jqLite(element.find('optgroup')[0]);
         var b = jqLite(first.find('option')[0]);
         var d = jqLite(first.find('option')[1]);
         expect(first.attr('label')).toEqual('first');
         expect(b.text()).toEqual('B');
         expect(d.text()).toEqual('D');
 
-        var second = jqLite(select.find('optgroup')[1]);
+        var second = jqLite(element.find('optgroup')[1]);
         var c = jqLite(second.find('option')[0]);
         var e = jqLite(second.find('option')[1]);
         expect(second.attr('label')).toEqual('second');
         expect(c.text()).toEqual('C');
         expect(e.text()).toEqual('E');
 
-        scope.selected = scope.values[0];
-        scope.$digest();
-        expect(select.val()).toEqual('0');
+        scope.$apply(function() {
+          scope.selected = scope.values[0];
+        });
+
+        expect(element.val()).toEqual('0');
       });
 
+
       it('should bind to scope value through experession', function() {
-        createSelect({'ng:model':'selected', 'ng:options':'item.id as item.name for item in values'});
-        scope.values = [{id:10, name:'A'}, {id:20, name:'B'}];
-        scope.selected = scope.values[0].id;
-        scope.$digest();
-        expect(select.val()).toEqual('0');
+        createSelect({
+          'ng:model': 'selected',
+          'ng:options': 'item.id as item.name for item in values'
+        });
 
-        scope.selected = scope.values[1].id;
-        scope.$digest();
-        expect(select.val()).toEqual('1');
+        scope.$apply(function() {
+          scope.values = [{id: 10, name: 'A'}, {id: 20, name: 'B'}];
+          scope.selected = scope.values[0].id;
+        });
+
+        expect(element.val()).toEqual('0');
+
+        scope.$apply(function() {
+          scope.selected = scope.values[1].id;
+        });
+
+        expect(element.val()).toEqual('1');
       });
 
+
       it('should bind to object key', function() {
         createSelect({
-          'ng:model':'selected',
-          'ng:options':'key as value for (key, value) in object'
+          'ng:model': 'selected',
+          'ng:options': 'key as value for (key, value) in object'
         });
-        scope.object = {'red':'FF0000', 'green':'00FF00', 'blue':'0000FF'};
-        scope.selected = 'green';
-        scope.$digest();
-        expect(select.val()).toEqual('green');
 
-        scope.selected = 'blue';
-        scope.$digest();
-        expect(select.val()).toEqual('blue');
+        scope.$apply(function() {
+          scope.object = {red: 'FF0000', green: '00FF00', blue: '0000FF'};
+          scope.selected = 'green';
+        });
+
+        expect(element.val()).toEqual('green');
+
+        scope.$apply(function() {
+          scope.selected = 'blue';
+        });
+
+        expect(element.val()).toEqual('blue');
       });
 
+
       it('should bind to object value', function() {
         createSelect({
-          'ng:model':'selected',
-          'ng:options':'value as key for (key, value) in object'
+          'ng:model': 'selected',
+          'ng:options': 'value as key for (key, value) in object'
         });
-        scope.object = {'red':'FF0000', 'green':'00FF00', 'blue':'0000FF'};
-        scope.selected = '00FF00';
-        scope.$digest();
-        expect(select.val()).toEqual('green');
 
-        scope.selected = '0000FF';
-        scope.$digest();
-        expect(select.val()).toEqual('blue');
+        scope.$apply(function() {
+          scope.object = {red: 'FF0000', green: '00FF00', blue:'0000FF'};
+          scope.selected = '00FF00';
+        });
+
+        expect(element.val()).toEqual('green');
+
+        scope.$apply(function() {
+          scope.selected = '0000FF';
+        });
+
+        expect(element.val()).toEqual('blue');
       });
 
+
       it('should insert a blank option if bound to null', function() {
         createSingleSelect();
-        scope.values = [{name:'A'}];
-        scope.selected = null;
-        scope.$digest();
-        expect(select.find('option').length).toEqual(2);
-        expect(select.val()).toEqual('');
-        expect(jqLite(select.find('option')[0]).val()).toEqual('');
 
-        scope.selected = scope.values[0];
-        scope.$digest();
-        expect(select.val()).toEqual('0');
-        expect(select.find('option').length).toEqual(1);
+        scope.$apply(function() {
+          scope.values = [{name: 'A'}];
+          scope.selected = null;
+        });
+
+        expect(element.find('option').length).toEqual(2);
+        expect(element.val()).toEqual('');
+        expect(jqLite(element.find('option')[0]).val()).toEqual('');
+
+        scope.$apply(function() {
+          scope.selected = scope.values[0];
+        });
+
+        expect(element.val()).toEqual('0');
+        expect(element.find('option').length).toEqual(1);
       });
 
+
       it('should reuse blank option if bound to null', function() {
         createSingleSelect(true);
-        scope.values = [{name:'A'}];
-        scope.selected = null;
-        scope.$digest();
-        expect(select.find('option').length).toEqual(2);
-        expect(select.val()).toEqual('');
-        expect(jqLite(select.find('option')[0]).val()).toEqual('');
 
-        scope.selected = scope.values[0];
-        scope.$digest();
-        expect(select.val()).toEqual('0');
-        expect(select.find('option').length).toEqual(2);
+        scope.$apply(function() {
+          scope.values = [{name: 'A'}];
+          scope.selected = null;
+        });
+
+        expect(element.find('option').length).toEqual(2);
+        expect(element.val()).toEqual('');
+        expect(jqLite(element.find('option')[0]).val()).toEqual('');
+
+        scope.$apply(function() {
+          scope.selected = scope.values[0];
+        });
+
+        expect(element.val()).toEqual('0');
+        expect(element.find('option').length).toEqual(2);
       });
 
+
       it('should insert a unknown option if bound to something not in the list', function() {
         createSingleSelect();
-        scope.values = [{name:'A'}];
-        scope.selected = {};
-        scope.$digest();
-        expect(select.find('option').length).toEqual(2);
-        expect(select.val()).toEqual('?');
-        expect(jqLite(select.find('option')[0]).val()).toEqual('?');
 
-        scope.selected = scope.values[0];
-        scope.$digest();
-        expect(select.val()).toEqual('0');
-        expect(select.find('option').length).toEqual(1);
+        scope.$apply(function() {
+          scope.values = [{name: 'A'}];
+          scope.selected = {};
+        });
+
+        expect(element.find('option').length).toEqual(2);
+        expect(element.val()).toEqual('?');
+        expect(jqLite(element.find('option')[0]).val()).toEqual('?');
+
+        scope.$apply(function() {
+          scope.selected = scope.values[0];
+        });
+
+        expect(element.val()).toEqual('0');
+        expect(element.find('option').length).toEqual(1);
       });
 
+
       it('should select correct input if previously selected option was "?"', function() {
         createSingleSelect();
-        scope.values = [{name:'A'},{name:'B'}];
-        scope.selected = {};
-        scope.$digest();
-        expect(select.find('option').length).toEqual(3);
-        expect(select.val()).toEqual('?');
-        expect(select.find('option').eq(0).val()).toEqual('?');
 
-        browserTrigger(select.find('option').eq(1));
-        expect(select.val()).toEqual('0');
-        expect(select.find('option').eq(0).prop('selected')).toBeTruthy();
-        expect(select.find('option').length).toEqual(2);
+        scope.$apply(function() {
+          scope.values = [{name: 'A'}, {name: 'B'}];
+          scope.selected = {};
+        });
+
+        expect(element.find('option').length).toEqual(3);
+        expect(element.val()).toEqual('?');
+        expect(element.find('option').eq(0).val()).toEqual('?');
+
+        browserTrigger(element.find('option').eq(1));
+        expect(element.val()).toEqual('0');
+        expect(element.find('option').eq(0).prop('selected')).toBeTruthy();
+        expect(element.find('option').length).toEqual(2);
       });
     });
 
 
     describe('blank option', function () {
+
       it('should be compiled as template, be watched and updated', function () {
         var option;
-
         createSingleSelect('<option value="">blank is {{blankVal}}</option>');
-        scope.blankVal = 'so blank';
-        scope.values = [{name:'A'}];
-        scope.$digest();
+
+        scope.$apply(function() {
+          scope.blankVal = 'so blank';
+          scope.values = [{name: 'A'}];
+        });
 
         // check blank option is first and is compiled
-        expect(select.find('option').length == 2);
-        option = jqLite(select.find('option')[0]);
+        expect(element.find('option').length).toBe(2);
+        option = element.find('option').eq(0);
         expect(option.val()).toBe('');
         expect(option.text()).toBe('blank is so blank');
 
-        // change blankVal and $digest
-        scope.blankVal = 'not so blank';
-        scope.$digest();
+        scope.$apply(function() {
+          scope.blankVal = 'not so blank';
+        });
 
         // check blank option is first and is compiled
-        expect(select.find('option').length == 2);
-        option = jqLite(select.find('option')[0]);
+        expect(element.find('option').length).toBe(2);
+        option = element.find('option').eq(0);
         expect(option.val()).toBe('');
         expect(option.text()).toBe('blank is not so blank');
       });
 
+
       it('should support binding via ng:bind-template attribute', function () {
         var option;
-
         createSingleSelect('<option value="" ng:bind-template="blank is {{blankVal}}"></option>');
-        scope.blankVal = 'so blank';
-        scope.values = [{name:'A'}];
-        scope.$digest();
+
+        scope.$apply(function() {
+          scope.blankVal = 'so blank';
+          scope.values = [{name: 'A'}];
+        });
 
         // check blank option is first and is compiled
-        expect(select.find('option').length == 2);
-        option = jqLite(select.find('option')[0]);
+        expect(element.find('option').length).toBe(2);
+        option = element.find('option').eq(0);
         expect(option.val()).toBe('');
         expect(option.text()).toBe('blank is so blank');
       });
 
+
       it('should support biding via ng:bind attribute', function () {
         var option;
-
         createSingleSelect('<option value="" ng:bind="blankVal"></option>');
-        scope.blankVal = 'is blank';
-        scope.values = [{name:'A'}];
-        scope.$digest();
+
+        scope.$apply(function() {
+          scope.blankVal = 'is blank';
+          scope.values = [{name: 'A'}];
+        });
 
         // check blank option is first and is compiled
-        expect(select.find('option').length == 2);
-        option = jqLite(select.find('option')[0]);
+        expect(element.find('option').length).toBe(2);
+        option = element.find('option').eq(0);
         expect(option.val()).toBe('');
         expect(option.text()).toBe('is blank');
       });
 
+
       it('should be rendered with the attributes preserved', function () {
         var option;
-
         createSingleSelect('<option value="" class="coyote" id="road-runner" ' +
           'custom-attr="custom-attr">{{blankVal}}</option>');
-        scope.blankVal = 'is blank';
-        scope.$digest();
+
+        scope.$apply(function() {
+          scope.blankVal = 'is blank';
+        });
 
         // check blank option is first and is compiled
-        option = jqLite(select.find('option')[0]);
+        option = element.find('option').eq(0);
         expect(option.hasClass('coyote')).toBeTruthy();
         expect(option.attr('id')).toBe('road-runner');
         expect(option.attr('custom-attr')).toBe('custom-attr');
@@ -519,76 +645,101 @@ describe('select', function() {
 
 
     describe('on change', function() {
+
       it('should update model on change', function() {
         createSingleSelect();
-        scope.values = [{name:'A'}, {name:'B'}];
-        scope.selected = scope.values[0];
-        scope.$digest();
-        expect(select.val()).toEqual('0');
 
-        select.val('1');
-        browserTrigger(select, 'change');
+        scope.$apply(function() {
+          scope.values = [{name: 'A'}, {name: 'B'}];
+          scope.selected = scope.values[0];
+        });
+
+        expect(element.val()).toEqual('0');
+
+        element.val('1');
+        browserTrigger(element, 'change');
         expect(scope.selected).toEqual(scope.values[1]);
       });
 
+
       it('should update model on change through expression', function() {
-        createSelect({'ng:model':'selected', 'ng:options':'item.id as item.name for item in values'});
-        scope.values = [{id:10, name:'A'}, {id:20, name:'B'}];
-        scope.selected = scope.values[0].id;
-        scope.$digest();
-        expect(select.val()).toEqual('0');
+        createSelect({
+          'ng:model': 'selected',
+          'ng:options': 'item.id as item.name for item in values'
+        });
 
-        select.val('1');
-        browserTrigger(select, 'change');
+        scope.$apply(function() {
+          scope.values = [{id: 10, name: 'A'}, {id: 20, name: 'B'}];
+          scope.selected = scope.values[0].id;
+        });
+
+        expect(element.val()).toEqual('0');
+
+        element.val('1');
+        browserTrigger(element, 'change');
         expect(scope.selected).toEqual(scope.values[1].id);
       });
 
+
       it('should update model to null on change', function() {
         createSingleSelect(true);
-        scope.values = [{name:'A'}, {name:'B'}];
-        scope.selected = scope.values[0];
-        select.val('0');
-        scope.$digest();
 
-        select.val('');
-        browserTrigger(select, 'change');
+        scope.$apply(function() {
+          scope.values = [{name: 'A'}, {name: 'B'}];
+          scope.selected = scope.values[0];
+          element.val('0');
+        });
+
+        element.val('');
+        browserTrigger(element, 'change');
         expect(scope.selected).toEqual(null);
       });
     });
 
+
     describe('select-many', function() {
+
       it('should read multiple selection', function() {
         createMultiSelect();
-        scope.values = [{name:'A'}, {name:'B'}];
 
-        scope.selected = [];
-        scope.$digest();
-        expect(select.find('option').length).toEqual(2);
-        expect(jqLite(select.find('option')[0]).prop('selected')).toBeFalsy();
-        expect(jqLite(select.find('option')[1]).prop('selected')).toBeFalsy();
+        scope.$apply(function() {
+          scope.values = [{name: 'A'}, {name: 'B'}];
+          scope.selected = [];
+        });
 
-        scope.selected.push(scope.values[1]);
-        scope.$digest();
-        expect(select.find('option').length).toEqual(2);
-        expect(select.find('option')[0].selected).toEqual(false);
-        expect(select.find('option')[1].selected).toEqual(true);
+        expect(element.find('option').length).toEqual(2);
+        expect(element.find('option')[0].selected).toBeFalsy();
+        expect(element.find('option')[1].selected).toBeFalsy();
 
-        scope.selected.push(scope.values[0]);
-        scope.$digest();
-        expect(select.find('option').length).toEqual(2);
-        expect(select.find('option')[0].selected).toEqual(true);
-        expect(select.find('option')[1].selected).toEqual(true);
+        scope.$apply(function() {
+          scope.selected.push(scope.values[1]);
+        });
+
+        expect(element.find('option').length).toEqual(2);
+        expect(element.find('option')[0].selected).toBeFalsy();
+        expect(element.find('option')[1].selected).toBeTruthy();
+
+        scope.$apply(function() {
+          scope.selected.push(scope.values[0]);
+        });
+
+        expect(element.find('option').length).toEqual(2);
+        expect(element.find('option')[0].selected).toBeTruthy();
+        expect(element.find('option')[1].selected).toBeTruthy();
       });
 
+
       it('should update model on change', function() {
         createMultiSelect();
-        scope.values = [{name:'A'}, {name:'B'}];
 
-        scope.selected = [];
-        scope.$digest();
-        select.find('option')[0].selected = true;
+        scope.$apply(function() {
+          scope.values = [{name: 'A'}, {name: 'B'}];
+          scope.selected = [];
+        });
 
-        browserTrigger(select, 'change');
+        element.find('option')[0].selected = true;
+
+        browserTrigger(element, 'change');
         expect(scope.selected).toEqual([scope.values[0]]);
       });
 
@@ -602,16 +753,57 @@ describe('select', function() {
 
         scope.selected = ['1'];
         scope.$digest();
-        expect(select.find('option')[1].selected).toBe(true);
+        expect(element.find('option')[1].selected).toBe(true);
 
-        select.find('option')[0].selected = true;
-        browserTrigger(select, 'change');
+        element.find('option')[0].selected = true;
+        browserTrigger(element, 'change');
         expect(scope.selected).toEqual(['0', '1']);
 
-        select.find('option')[1].selected = false;
-        browserTrigger(select, 'change');
+        element.find('option')[1].selected = false;
+        browserTrigger(element, 'change');
         expect(scope.selected).toEqual(['0']);
       });
     });
+
+
+    describe('ng:required', function() {
+
+      it('should allow bindings on ng:required', function() {
+        createSelect({
+          'ng:model': 'value',
+          'ng:options': 'item.name for item in values',
+          'ng:required': '{{required}}'
+        }, true);
+
+
+        scope.$apply(function() {
+          scope.values = [{name: 'A', id: 1}, {name: 'B', id: 2}];
+          scope.required = false;
+        });
+
+        element.val('');
+        browserTrigger(element, 'change');
+        expect(element).toBeValid();
+
+        scope.$apply(function() {
+          scope.required = true;
+        });
+        expect(element).toBeInvalid();
+
+        scope.$apply(function() {
+          scope.value = scope.values[0];
+        });
+        expect(element).toBeValid();
+
+        element.val('');
+        browserTrigger(element, 'change');
+        expect(element).toBeInvalid();
+
+        scope.$apply(function() {
+          scope.required = false;
+        });
+        expect(element).toBeValid();
+      });
+    });
   });
 });