chore(directives,widgets): reorg the code under directive/ dir

22 files changed, 4070 insertions, 0 deletions

diff --git a/test/directive/aSpec.js b/test/directive/aSpec.js
new file mode 100644
index 00000000..8aa2449d
--- /dev/null
+++ b/test/directive/aSpec.js
@@ -0,0 +1,46 @@
+'use strict';
+
+describe('a', function() {
+  var element;
+
+
+  afterEach(function(){
+    dealoc(element);
+  });
+
+
+  it('should prevent default action to be executed when href is empty',
+      inject(function($rootScope, $compile) {
+    var orgLocation = document.location.href,
+        preventDefaultCalled = false,
+        event;
+
+    element = $compile('<a href="">empty link</a>')($rootScope);
+
+    if (msie < 9) {
+
+      event = document.createEventObject();
+      expect(event.returnValue).not.toBeDefined();
+      element[0].fireEvent('onclick', event);
+      expect(event.returnValue).toEqual(false);
+
+    } else {
+
+      event = document.createEvent('MouseEvent');
+      event.initMouseEvent(
+        'click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+
+      event.preventDefaultOrg = event.preventDefault;
+      event.preventDefault = function() {
+        preventDefaultCalled = true;
+        if (this.preventDefaultOrg) this.preventDefaultOrg();
+      };
+
+      element[0].dispatchEvent(event);
+
+      expect(preventDefaultCalled).toEqual(true);
+    }
+
+    expect(document.location.href).toEqual(orgLocation);
+  }));
+});
diff --git a/test/directive/booleanAttrDirSpecs.js b/test/directive/booleanAttrDirSpecs.js
new file mode 100644
index 00000000..2c47d81a
--- /dev/null
+++ b/test/directive/booleanAttrDirSpecs.js
@@ -0,0 +1,111 @@
+'use strict';
+
+describe('boolean attr directives', function() {
+  var element;
+
+  afterEach(function() {
+    dealoc(element);
+  });
+
+
+  it('should bind href', inject(function($rootScope, $compile) {
+    element = $compile('<a ng:href="{{url}}"></a>')($rootScope)
+    $rootScope.url = 'http://server'
+    $rootScope.$digest();
+    expect(element.attr('href')).toEqual('http://server');
+  }));
+
+
+  it('should bind disabled', inject(function($rootScope, $compile) {
+    element = $compile('<button ng:disabled="{{isDisabled}}">Button</button>')($rootScope)
+    $rootScope.isDisabled = false;
+    $rootScope.$digest();
+    expect(element.attr('disabled')).toBeFalsy();
+    $rootScope.isDisabled = true;
+    $rootScope.$digest();
+    expect(element.attr('disabled')).toBeTruthy();
+  }));
+
+
+  it('should bind checked', inject(function($rootScope, $compile) {
+    element = $compile('<input type="checkbox" ng:checked="{{isChecked}}" />')($rootScope)
+    $rootScope.isChecked = false;
+    $rootScope.$digest();
+    expect(element.attr('checked')).toBeFalsy();
+    $rootScope.isChecked=true;
+    $rootScope.$digest();
+    expect(element.attr('checked')).toBeTruthy();
+  }));
+
+
+  it('should bind selected', inject(function($rootScope, $compile) {
+    element = $compile('<select><option value=""></option><option ng:selected="{{isSelected}}">Greetings!</option></select>')($rootScope)
+    jqLite(document.body).append(element)
+    $rootScope.isSelected=false;
+    $rootScope.$digest();
+    expect(element.children()[1].selected).toBeFalsy();
+    $rootScope.isSelected=true;
+    $rootScope.$digest();
+    expect(element.children()[1].selected).toBeTruthy();
+  }));
+
+
+  it('should bind readonly', inject(function($rootScope, $compile) {
+    element = $compile('<input type="text" ng:readonly="{{isReadonly}}" />')($rootScope)
+    $rootScope.isReadonly=false;
+    $rootScope.$digest();
+    expect(element.attr('readOnly')).toBeFalsy();
+    $rootScope.isReadonly=true;
+    $rootScope.$digest();
+    expect(element.attr('readOnly')).toBeTruthy();
+  }));
+
+
+  it('should bind multiple', inject(function($rootScope, $compile) {
+    element = $compile('<select ng:multiple="{{isMultiple}}"></select>')($rootScope)
+    $rootScope.isMultiple=false;
+    $rootScope.$digest();
+    expect(element.attr('multiple')).toBeFalsy();
+    $rootScope.isMultiple='multiple';
+    $rootScope.$digest();
+    expect(element.attr('multiple')).toBeTruthy();
+  }));
+
+
+  it('should bind src', inject(function($rootScope, $compile) {
+    element = $compile('<div ng:src="{{url}}" />')($rootScope)
+    $rootScope.url = 'http://localhost/';
+    $rootScope.$digest();
+    expect(element.attr('src')).toEqual('http://localhost/');
+  }));
+
+
+  it('should bind href and merge with other attrs', inject(function($rootScope, $compile) {
+    element = $compile('<a ng:href="{{url}}" rel="{{rel}}"></a>')($rootScope);
+    $rootScope.url = 'http://server';
+    $rootScope.rel = 'REL';
+    $rootScope.$digest();
+    expect(element.attr('href')).toEqual('http://server');
+    expect(element.attr('rel')).toEqual('REL');
+  }));
+
+
+  it('should bind Text with no Bindings', inject(function($compile, $rootScope) {
+    forEach(['checked', 'disabled', 'multiple', 'readonly', 'selected'], function(name) {
+      element = $compile('<div ng:' + name + '="some"></div>')($rootScope)
+      $rootScope.$digest();
+      expect(element.attr(name)).toBe(name);
+      dealoc(element);
+    });
+
+    element = $compile('<div ng:src="some"></div>')($rootScope)
+    $rootScope.$digest();
+    expect(element.attr('src')).toEqual('some');
+    dealoc(element);
+
+    element = $compile('<div ng:href="some"></div>')($rootScope)
+    $rootScope.$digest();
+    expect(element.attr('href')).toEqual('some');
+    dealoc(element);
+  }));
+});
diff --git a/test/directive/formSpec.js b/test/directive/formSpec.js
new file mode 100644
index 00000000..6387241f
--- /dev/null
+++ b/test/directive/formSpec.js
@@ -0,0 +1,205 @@
+'use strict';
+
+describe('form', function() {
+  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 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);
+
+    var form = scope.form;
+    widget.setValidity('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 = 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', function() {
+    var callback = jasmine.createSpy('submit').andCallFake(function(event) {
+      expect(event.isDefaultPrevented()).toBe(false);
+      event.preventDefault();
+    });
+
+    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', function() {
+    doc = $compile('<form name="myForm"></form>')(scope);
+    expect(scope.myForm).toBeTruthy();
+    expect(doc.data('$form')).toBeTruthy();
+    expect(doc.data('$form')).toEqual(scope.myForm);
+  });
+
+
+  it('should allow name to be an expression', function() {
+    doc = $compile('<form name="obj.myForm"></form>')(scope);
+
+    expect(scope.obj).toBeDefined();
+    expect(scope.obj.myForm).toBeTruthy();
+  });
+
+
+  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)(scope);
+
+    var parent = scope.parent;
+    var child = scope.child;
+    var input = child.text;
+
+    input.setValidity('MyError', false);
+    expect(parent.error.MyError).toEqual([input]);
+    expect(child.error.MyError).toEqual([input]);
+
+    input.setValidity('MyError', true);
+    expect(parent.error.MyError).toBeUndefined();
+    expect(child.error.MyError).toBeUndefined();
+  });
+
+
+  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)(scope);
+
+    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.setValidity('myRule', false);
+    expect(input.error.myRule).toEqual(true);
+    expect(child.error.myRule).toEqual([input]);
+    expect(parent.error.myRule).toEqual([input]);
+
+    input.setValidity('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.setValidity('ERROR', false);
+      scope.$apply();
+      expect(doc).toBeInvalid();
+
+      widget.setValidity('ANOTHER', false);
+      scope.$apply();
+
+      widget.setValidity('ERROR', true);
+      scope.$apply();
+      expect(doc).toBeInvalid();
+
+      widget.setValidity('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/directive/inputSpec.js b/test/directive/inputSpec.js
new file mode 100644
index 00000000..d9f6b7b3
--- /dev/null
+++ b/test/directive/inputSpec.js
@@ -0,0 +1,961 @@
+'use strict';
+
+describe('NgModelController', function() {
+  var ctrl, scope, ngModelAccessor;
+
+  beforeEach(inject(function($rootScope, $controller) {
+    scope = $rootScope;
+    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;
+    });
+  }));
+
+
+  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();
+
+    expect(ctrl.formatters).toEqual([]);
+    expect(ctrl.parsers).toEqual([]);
+  });
+
+
+  describe('touch', function() {
+    it('should only fire $viewTouch when pristine', function() {
+      var spy = jasmine.createSpy('$viewTouch');
+      scope.$on('$viewTouch', spy);
+
+      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();
+    });
+  });
+
+
+  describe('setValidity', function() {
+
+    it('should emit $invalid only when $valid', function() {
+      var spy = jasmine.createSpy('$invalid');
+      scope.$on('$invalid', spy);
+
+      ctrl.setValidity('ERROR', false);
+      expect(spy).toHaveBeenCalledOnce();
+
+      spy.reset();
+      ctrl.setValidity('ERROR', false);
+      expect(spy).not.toHaveBeenCalled();
+    });
+
+
+    it('should set and unset the error', function() {
+      ctrl.setValidity('REQUIRED', false);
+      expect(ctrl.error.REQUIRED).toBe(true);
+
+      ctrl.setValidity('REQUIRED', true);
+      expect(ctrl.error.REQUIRED).toBeUndefined();
+    });
+
+
+    it('should set valid/invalid', function() {
+      ctrl.setValidity('FIRST', false);
+      expect(ctrl.valid).toBe(false);
+      expect(ctrl.invalid).toBe(true);
+
+      ctrl.setValidity('SECOND', false);
+      expect(ctrl.valid).toBe(false);
+      expect(ctrl.invalid).toBe(true);
+
+      ctrl.setValidity('SECOND', true);
+      expect(ctrl.valid).toBe(false);
+      expect(ctrl.invalid).toBe(true);
+
+      ctrl.setValidity('FIRST', true);
+      expect(ctrl.valid).toBe(true);
+      expect(ctrl.invalid).toBe(false);
+    });
+
+
+    it('should emit $valid only when $invalid', function() {
+      var spy = jasmine.createSpy('$valid');
+      scope.$on('$valid', spy);
+
+      ctrl.setValidity('ERROR', true);
+      expect(spy).not.toHaveBeenCalled();
+
+      ctrl.setValidity('ERROR', false);
+      ctrl.setValidity('ERROR', true);
+      expect(spy).toHaveBeenCalledOnce();
+    });
+  });
+
+
+  describe('view -> model', function() {
+
+    it('should set the value to $viewValue', function() {
+      ctrl.read('some-val');
+      expect(ctrl.viewValue).toBe('some-val');
+    });
+
+
+    it('should pipeline all registered parsers and set result to $modelValue', function() {
+      var log = [];
+
+      ctrl.parsers.push(function(value) {
+        log.push(value);
+        return value + '-a';
+      });
+
+      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 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 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 + '';
+      });
+
+      scope.$apply(function() {
+        scope.value = 3;
+      });
+      expect(log).toEqual([3, 5]);
+      expect(ctrl.viewValue).toBe('5');
+    });
+
+
+    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();
+
+      // invalid
+      ctrl.formatters.push(function() {return undefined;});
+      scope.$apply(function() {
+        scope.value= 5;
+      });
+      expect(ctrl.render).not.toHaveBeenCalled();
+    });
+  });
+});
+
+describe('ng:model', function() {
+
+  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();
+
+    $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();
+
+    element.val('vojta@google.com');
+    browserTrigger(element, 'blur');
+    expect(element).toBeValid();
+    expect(element).toBeDirty();
+
+    dealoc(element);
+  }));
+});
+
+
+describe('input', function() {
+  var formElm, inputElm, scope, $compile;
+
+  function compileInput(inputHtml) {
+    formElm = jqLite('<form name="form">' + inputHtml + '</form>');
+    inputElm = formElm.find('input');
+    $compile(formElm)(scope);
+  }
+
+  function changeInputValueTo(value) {
+    inputElm.val(value);
+    browserTrigger(inputElm, 'blur');
+  }
+
+  beforeEach(inject(function($injector) {
+    $compile = $injector.get('$compile');
+    scope = $injector.get('$rootScope');
+  }));
+
+  afterEach(function() {
+    dealoc(formElm);
+  });
+
+
+  it('should bind to a model', function() {
+    compileInput('<input type="text" ng:model="name" name="alias" ng:change="change()" />');
+
+    scope.$apply(function() {
+      scope.name = 'misko';
+    });
+
+    expect(inputElm.val()).toBe('misko');
+  });
+
+
+  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);
+
+    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 ignore input without ng:model attr', function() {
+    compileInput('<input type="text" 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', function() {
+    expect(function() {
+      compileInput('<input type="text" ng:model="throw \'\'">');
+      scope.$digest();
+    }).toThrow("Syntax Error: Token '''' is an unexpected token at column 7 of the expression [throw ''] starting at [''].");
+  });
+
+
+  it("should render as blank if null", function() {
+    compileInput('<input type="text" ng:model="age" />');
+
+    scope.$apply(function() {
+      scope.age = null;
+    });
+
+    expect(scope.age).toBeNull();
+    expect(inputElm.val()).toEqual('');
+  });
+
+
+  it('should render 0 even if it is a number', function() {
+    compileInput('<input type="text" ng:model="value" />');
+    scope.$apply(function() {
+      scope.value = 0;
+    });
+
+    expect(inputElm.val()).toBe('0');
+  });
+
+
+  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();
+
+      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();
+
+      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(inputElm.val()).toBe('');
+
+      scope.$apply(function() {
+        scope.age = null;
+      });
+
+      expect(scope.age).toBeNull();
+      expect(inputElm.val()).toBe('');
+    });
+
+
+    it('should parse empty string to null', function() {
+      compileInput('<input type="number" ng:model="age" />');
+
+      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();
+
+        changeInputValueTo('1');
+        expect(inputElm).toBeInvalid();
+        expect(scope.value).toBeFalsy();
+        expect(scope.form.alias.error.MIN).toBeTruthy();
+
+        changeInputValueTo('100');
+        expect(inputElm).toBeValid();
+        expect(scope.value).toBe(100);
+        expect(scope.form.alias.error.MIN).toBeFalsy();
+      });
+    });
+
+
+    describe('max', function() {
+
+      it('should validate', function() {
+        compileInput('<input type="number" ng:model="value" name="alias" max="10" />');
+        scope.$digest();
+
+        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();
+      });
+    });
+
+
+    describe('required', function() {
+
+      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 />');
+
+        scope.$apply(function() {
+          scope.value = 0;
+        });
+
+        expect(inputElm).toBeValid();
+        expect(inputElm.val()).toBe('0')
+        expect(scope.form.alias.error.REQUIRED).toBeFalsy();
+      });
+    });
+  });
+
+  describe('email', function() {
+
+    it('should validate e-mail', function() {
+      compileInput('<input type="email" ng:model="email" name="alias" />');
+
+      var widget = scope.form.alias;
+      changeInputValueTo('vojta@google.com');
+
+      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 validate url', function() {
+      compileInput('<input type="url" ng:model="url" name="alias" />');
+      var widget = scope.form.alias;
+
+      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('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('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');
+    });
+
+
+    // 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);
+    });
+  });
+
+
+  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 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('textarea', function() {
+
+    it("should process textarea", function() {
+      compileInput('<textarea ng:model="name"></textarea>');
+      inputElm = formElm.find('textarea');
+
+      scope.$apply(function() {
+        scope.name = 'Adam';
+      });
+      expect(inputElm.val()).toEqual('Adam');
+
+      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('ng:list', function() {
+
+    it('should parse text into an array', function() {
+      compileInput('<input type="text" ng:model="list" ng:list />');
+
+      // 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']);
+    });
+
+
+    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 />');
+
+      changeInputValueTo('a ');
+      expect(inputElm.val()).toEqual('a ');
+      expect(scope.list).toEqual(['a']);
+
+      changeInputValueTo('a ,');
+      expect(inputElm.val()).toEqual('a ,');
+      expect(scope.list).toEqual(['a']);
+
+      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']);
+    });
+
+
+    xit('should require at least one item', function() {
+      compileInput('<input type="text" ng:model="list" ng:list required />');
+
+      changeInputValueTo(' , ');
+      expect(inputElm).toBeInvalid();
+    });
+
+
+    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();
+    });
+  });
+
+
+  describe('ng:model-instant', function() {
+
+    it('should bind keydown, change, input events', inject(function($browser) {
+      compileInput('<input type="text" ng:model="value" ng:model-instant />');
+
+      inputElm.val('value1');
+      browserTrigger(inputElm, 'keydown');
+
+      // should be async (because of keydown)
+      expect(scope.value).toBeUndefined();
+
+      $browser.defer.flush();
+      expect(scope.value).toBe('value1');
+
+      inputElm.val('value2');
+      browserTrigger(inputElm, 'change');
+      expect(scope.value).toBe('value2');
+
+      if (msie < 9) return;
+
+      inputElm.val('value3');
+      browserTrigger(inputElm, 'input');
+      expect(scope.value).toBe('value3');
+    }));
+  });
+});
diff --git a/test/directive/ngBindSpec.js b/test/directive/ngBindSpec.js
new file mode 100644
index 00000000..e8c07494
--- /dev/null
+++ b/test/directive/ngBindSpec.js
@@ -0,0 +1,113 @@
+'use strict';
+
+describe('ng:bind-*', function() {
+  var element;
+
+
+  afterEach(function() {
+    dealoc(element);
+  });
+
+
+  describe('ng:bind', function() {
+
+    it('should set text', inject(function($rootScope, $compile) {
+      element = $compile('<div ng:bind="a"></div>')($rootScope);
+      expect(element.text()).toEqual('');
+      $rootScope.a = 'misko';
+      $rootScope.$digest();
+      expect(element.hasClass('ng-binding')).toEqual(true);
+      expect(element.text()).toEqual('misko');
+    }));
+
+    it('should set text to blank if undefined', inject(function($rootScope, $compile) {
+      element = $compile('<div ng:bind="a"></div>')($rootScope);
+      $rootScope.a = 'misko';
+      $rootScope.$digest();
+      expect(element.text()).toEqual('misko');
+      $rootScope.a = undefined;
+      $rootScope.$digest();
+      expect(element.text()).toEqual('');
+      $rootScope.a = null;
+      $rootScope.$digest();
+      expect(element.text()).toEqual('');
+    }));
+
+    it('should set html', inject(function($rootScope, $compile) {
+      element = $compile('<div ng:bind-html="html"></div>')($rootScope);
+      $rootScope.html = '<div unknown>hello</div>';
+      $rootScope.$digest();
+      expect(lowercase(element.html())).toEqual('<div>hello</div>');
+    }));
+
+    it('should set unsafe html', inject(function($rootScope, $compile) {
+      element = $compile('<div ng:bind-html-unsafe="html"></div>')($rootScope);
+      $rootScope.html = '<div onclick="">hello</div>';
+      $rootScope.$digest();
+      expect(lowercase(element.html())).toEqual('<div onclick="">hello</div>');
+    }));
+
+    it('should suppress rendering of falsy values', inject(function($rootScope, $compile) {
+      element = $compile('<div>{{ null }}{{ undefined }}{{ "" }}-{{ 0 }}{{ false }}</div>')($rootScope);
+      $rootScope.$digest();
+      expect(element.text()).toEqual('-0false');
+    }));
+
+    it('should render object as JSON ignore $$', inject(function($rootScope, $compile) {
+      element = $compile('<div>{{ {key:"value", $$key:"hide"}  }}</div>')($rootScope);
+      $rootScope.$digest();
+      expect(fromJson(element.text())).toEqual({key:'value'});
+    }));
+  });
+
+
+  describe('ng:bind-template', function() {
+
+    it('should ng:bind-template', inject(function($rootScope, $compile) {
+      element = $compile('<div ng:bind-template="Hello {{name}}!"></div>')($rootScope);
+      $rootScope.name = 'Misko';
+      $rootScope.$digest();
+      expect(element.hasClass('ng-binding')).toEqual(true);
+      expect(element.text()).toEqual('Hello Misko!');
+    }));
+
+    it('should render object as JSON ignore $$', inject(function($rootScope, $compile) {
+      element = $compile('<pre>{{ {key:"value", $$key:"hide"}  }}</pre>')($rootScope);
+      $rootScope.$digest();
+      expect(fromJson(element.text())).toEqual({key:'value'});
+    }));
+  });
+
+
+  describe('ng:bind-attr', function() {
+    it('should bind attributes', inject(function($rootScope, $compile) {
+      element = $compile('<div ng:bind-attr="{src:\'http://localhost/mysrc\', alt:\'myalt\'}"/>')($rootScope);
+      $rootScope.$digest();
+      expect(element.attr('src')).toEqual('http://localhost/mysrc');
+      expect(element.attr('alt')).toEqual('myalt');
+    }));
+
+    it('should not pretty print JSON in attributes', inject(function($rootScope, $compile) {
+      element = $compile('<img alt="{{ {a:1} }}"/>')($rootScope);
+      $rootScope.$digest();
+      expect(element.attr('alt')).toEqual('{"a":1}');
+    }));
+
+    it('should remove special attributes on false', inject(function($rootScope, $compile) {
+      element = $compile('<input ng:bind-attr="{disabled:\'{{disabled}}\', readonly:\'{{readonly}}\', checked:\'{{checked}}\'}"/>')($rootScope);
+      var input = element[0];
+      expect(input.disabled).toEqual(false);
+      expect(input.readOnly).toEqual(false);
+      expect(input.checked).toEqual(false);
+
+      $rootScope.disabled = true;
+      $rootScope.readonly = true;
+      $rootScope.checked = true;
+      $rootScope.$digest();
+
+      expect(input.disabled).toEqual(true);
+      expect(input.readOnly).toEqual(true);
+      expect(input.checked).toEqual(true);
+    }));
+  });
+});
diff --git a/test/directive/ngClassSpec.js b/test/directive/ngClassSpec.js
new file mode 100644
index 00000000..a8b6b17e
--- /dev/null
+++ b/test/directive/ngClassSpec.js
@@ -0,0 +1,204 @@
+'use strict';
+
+describe('ng:class', function() {
+  var element;
+
+
+  afterEach(function() {
+    dealoc(element);
+  });
+
+
+  it('should add new and remove old classes dynamically', inject(function($rootScope, $compile) {
+    element = $compile('<div class="existing" ng:class="dynClass"></div>')($rootScope);
+    $rootScope.dynClass = 'A';
+    $rootScope.$digest();
+    expect(element.hasClass('existing')).toBe(true);
+    expect(element.hasClass('A')).toBe(true);
+
+    $rootScope.dynClass = 'B';
+    $rootScope.$digest();
+    expect(element.hasClass('existing')).toBe(true);
+    expect(element.hasClass('A')).toBe(false);
+    expect(element.hasClass('B')).toBe(true);
+
+    delete $rootScope.dynClass;
+    $rootScope.$digest();
+    expect(element.hasClass('existing')).toBe(true);
+    expect(element.hasClass('A')).toBe(false);
+    expect(element.hasClass('B')).toBe(false);
+  }));
+
+
+  it('should support adding multiple classes via an array', inject(function($rootScope, $compile) {
+    element = $compile('<div class="existing" ng:class="[\'A\', \'B\']"></div>')($rootScope);
+    $rootScope.$digest();
+    expect(element.hasClass('existing')).toBeTruthy();
+    expect(element.hasClass('A')).toBeTruthy();
+    expect(element.hasClass('B')).toBeTruthy();
+  }));
+
+
+  it('should support adding multiple classes conditionally via a map of class names to boolean' +
+      'expressions', inject(function($rootScope, $compile) {
+    var element = $compile(
+        '<div class="existing" ' +
+            'ng:class="{A: conditionA, B: conditionB(), AnotB: conditionA&&!conditionB}">' +
+        '</div>')($rootScope);
+    $rootScope.conditionA = true;
+    $rootScope.$digest();
+    expect(element.hasClass('existing')).toBeTruthy();
+    expect(element.hasClass('A')).toBeTruthy();
+    expect(element.hasClass('B')).toBeFalsy();
+    expect(element.hasClass('AnotB')).toBeTruthy();
+
+    $rootScope.conditionB = function() { return true };
+    $rootScope.$digest();
+    expect(element.hasClass('existing')).toBeTruthy();
+    expect(element.hasClass('A')).toBeTruthy();
+    expect(element.hasClass('B')).toBeTruthy();
+    expect(element.hasClass('AnotB')).toBeFalsy();
+  }));
+
+
+  it('should support adding multiple classes via a space delimited string', inject(function($rootScope, $compile) {
+    element = $compile('<div class="existing" ng:class="\'A B\'"></div>')($rootScope);
+    $rootScope.$digest();
+    expect(element.hasClass('existing')).toBeTruthy();
+    expect(element.hasClass('A')).toBeTruthy();
+    expect(element.hasClass('B')).toBeTruthy();
+  }));
+
+
+  it('should preserve class added post compilation with pre-existing classes', inject(function($rootScope, $compile) {
+    element = $compile('<div class="existing" ng:class="dynClass"></div>')($rootScope);
+    $rootScope.dynClass = 'A';
+    $rootScope.$digest();
+    expect(element.hasClass('existing')).toBe(true);
+
+    // add extra class, change model and eval
+    element.addClass('newClass');
+    $rootScope.dynClass = 'B';
+    $rootScope.$digest();
+
+    expect(element.hasClass('existing')).toBe(true);
+    expect(element.hasClass('B')).toBe(true);
+    expect(element.hasClass('newClass')).toBe(true);
+  }));
+
+
+  it('should preserve class added post compilation without pre-existing classes"', inject(function($rootScope, $compile) {
+    element = $compile('<div ng:class="dynClass"></div>')($rootScope);
+    $rootScope.dynClass = 'A';
+    $rootScope.$digest();
+    expect(element.hasClass('A')).toBe(true);
+
+    // add extra class, change model and eval
+    element.addClass('newClass');
+    $rootScope.dynClass = 'B';
+    $rootScope.$digest();
+
+    expect(element.hasClass('B')).toBe(true);
+    expect(element.hasClass('newClass')).toBe(true);
+  }));
+
+
+  it('should preserve other classes with similar name"', inject(function($rootScope, $compile) {
+    element = $compile('<div class="ui-panel ui-selected" ng:class="dynCls"></div>')($rootScope);
+    $rootScope.dynCls = 'panel';
+    $rootScope.$digest();
+    $rootScope.dynCls = 'foo';
+    $rootScope.$digest();
+    expect(element[0].className).toBe('ui-panel ui-selected ng-scope foo');
+  }));
+
+
+  it('should not add duplicate classes', inject(function($rootScope, $compile) {
+    element = $compile('<div class="panel bar" ng:class="dynCls"></div>')($rootScope);
+    $rootScope.dynCls = 'panel';
+    $rootScope.$digest();
+    expect(element[0].className).toBe('panel bar ng-scope');
+  }));
+
+
+  it('should remove classes even if it was specified via class attribute', inject(function($rootScope, $compile) {
+    element = $compile('<div class="panel bar" ng:class="dynCls"></div>')($rootScope);
+    $rootScope.dynCls = 'panel';
+    $rootScope.$digest();
+    $rootScope.dynCls = 'window';
+    $rootScope.$digest();
+    expect(element[0].className).toBe('bar ng-scope window');
+  }));
+
+
+  it('should remove classes even if they were added by another code', inject(function($rootScope, $compile) {
+    element = $compile('<div ng:class="dynCls"></div>')($rootScope);
+    $rootScope.dynCls = 'foo';
+    $rootScope.$digest();
+    element.addClass('foo');
+    $rootScope.dynCls = '';
+    $rootScope.$digest();
+  }));
+
+
+  it('should convert undefined and null values to an empty string', inject(function($rootScope, $compile) {
+    element = $compile('<div ng:class="dynCls"></div>')($rootScope);
+    $rootScope.dynCls = [undefined, null];
+    $rootScope.$digest();
+  }));
+
+
+  it('should ng:class odd/even', inject(function($rootScope, $compile) {
+    element = $compile('<ul><li ng:repeat="i in [0,1]" class="existing" ng:class-odd="\'odd\'" ng:class-even="\'even\'"></li><ul>')($rootScope);
+    $rootScope.$digest();
+    var e1 = jqLite(element[0].childNodes[1]);
+    var e2 = jqLite(element[0].childNodes[2]);
+    expect(e1.hasClass('existing')).toBeTruthy();
+    expect(e1.hasClass('odd')).toBeTruthy();
+    expect(e2.hasClass('existing')).toBeTruthy();
+    expect(e2.hasClass('even')).toBeTruthy();
+  }));
+
+
+  it('should allow both ng:class and ng:class-odd/even on the same element', inject(function($rootScope, $compile) {
+    element = $compile('<ul>' +
+      '<li ng:repeat="i in [0,1]" ng:class="\'plainClass\'" ' +
+      'ng:class-odd="\'odd\'" ng:class-even="\'even\'"></li>' +
+      '<ul>')($rootScope);
+    $rootScope.$apply();
+    var e1 = jqLite(element[0].childNodes[1]);
+    var e2 = jqLite(element[0].childNodes[2]);
+
+    expect(e1.hasClass('plainClass')).toBeTruthy();
+    expect(e1.hasClass('odd')).toBeTruthy();
+    expect(e1.hasClass('even')).toBeFalsy();
+    expect(e2.hasClass('plainClass')).toBeTruthy();
+    expect(e2.hasClass('even')).toBeTruthy();
+    expect(e2.hasClass('odd')).toBeFalsy();
+  }));
+
+
+  it('should allow both ng:class and ng:class-odd/even with multiple classes', inject(function($rootScope, $compile) {
+    element = $compile('<ul>' +
+      '<li ng:repeat="i in [0,1]" ng:class="[\'A\', \'B\']" ' +
+      'ng:class-odd="[\'C\', \'D\']" ng:class-even="[\'E\', \'F\']"></li>' +
+      '<ul>')($rootScope);
+    $rootScope.$apply();
+    var e1 = jqLite(element[0].childNodes[1]);
+    var e2 = jqLite(element[0].childNodes[2]);
+
+    expect(e1.hasClass('A')).toBeTruthy();
+    expect(e1.hasClass('B')).toBeTruthy();
+    expect(e1.hasClass('C')).toBeTruthy();
+    expect(e1.hasClass('D')).toBeTruthy();
+    expect(e1.hasClass('E')).toBeFalsy();
+    expect(e1.hasClass('F')).toBeFalsy();
+
+    expect(e2.hasClass('A')).toBeTruthy();
+    expect(e2.hasClass('B')).toBeTruthy();
+    expect(e2.hasClass('E')).toBeTruthy();
+    expect(e2.hasClass('F')).toBeTruthy();
+    expect(e2.hasClass('C')).toBeFalsy();
+    expect(e2.hasClass('D')).toBeFalsy();
+  }));
+});
diff --git a/test/directive/ngClickSpec.js b/test/directive/ngClickSpec.js
new file mode 100644
index 00000000..cb52901c
--- /dev/null
+++ b/test/directive/ngClickSpec.js
@@ -0,0 +1,26 @@
+'use strict';
+
+describe('ng:click', function() {
+  var element;
+
+  afterEach(function() {
+    dealoc(element);
+  });
+
+  it('should get called on a click', inject(function($rootScope, $compile) {
+    element = $compile('<div ng:click="clicked = true"></div>')($rootScope);
+    $rootScope.$digest();
+    expect($rootScope.clicked).toBeFalsy();
+
+    browserTrigger(element, 'click');
+    expect($rootScope.clicked).toEqual(true);
+  }));
+
+  it('should pass event object', inject(function($rootScope, $compile) {
+    element = $compile('<div ng:click="event = $event"></div>')($rootScope);
+    $rootScope.$digest();
+
+    browserTrigger(element, 'click');
+    expect($rootScope.event).toBeDefined();
+  }));
+});
diff --git a/test/directive/ngCloakSpec.js b/test/directive/ngCloakSpec.js
new file mode 100644
index 00000000..bd911f35
--- /dev/null
+++ b/test/directive/ngCloakSpec.js
@@ -0,0 +1,49 @@
+'use strict';
+
+describe('ng:cloak', function() {
+  var element;
+
+
+  afterEach(function() {
+    dealoc(element);
+  });
+
+
+  it('should get removed when an element is compiled', inject(function($rootScope, $compile) {
+    element = jqLite('<div ng:cloak></div>');
+    expect(element.attr('ng:cloak')).toBe('');
+    $compile(element);
+    expect(element.attr('ng:cloak')).toBeUndefined();
+  }));
+
+
+  it('should remove ng-cloak class from a compiled element with attribute', inject(
+      function($rootScope, $compile) {
+    element = jqLite('<div ng:cloak class="foo ng-cloak bar"></div>');
+
+    expect(element.hasClass('foo')).toBe(true);
+    expect(element.hasClass('ng-cloak')).toBe(true);
+    expect(element.hasClass('bar')).toBe(true);
+
+    $compile(element);
+
+    expect(element.hasClass('foo')).toBe(true);
+    expect(element.hasClass('ng-cloak')).toBe(false);
+    expect(element.hasClass('bar')).toBe(true);
+  }));
+
+
+  it('should remove ng-cloak class from a compiled element', inject(function($rootScope, $compile) {
+    element = jqLite('<div class="foo ng-cloak bar"></div>');
+
+    expect(element.hasClass('foo')).toBe(true);
+    expect(element.hasClass('ng-cloak')).toBe(true);
+    expect(element.hasClass('bar')).toBe(true);
+
+    $compile(element);
+
+    expect(element.hasClass('foo')).toBe(true);
+    expect(element.hasClass('ng-cloak')).toBe(false);
+    expect(element.hasClass('bar')).toBe(true);
+  }));
+});
diff --git a/test/directive/ngControllerSpec.js b/test/directive/ngControllerSpec.js
new file mode 100644
index 00000000..3ab6b929
--- /dev/null
+++ b/test/directive/ngControllerSpec.js
@@ -0,0 +1,65 @@
+'use strict';
+
+describe('ng:controller', function() {
+  var element;
+
+  beforeEach(inject(function($window) {
+    $window.Greeter = function($scope) {
+      // private stuff (not exported to scope)
+      this.prefix = 'Hello ';
+
+      // public stuff (exported to scope)
+      var ctrl = this;
+      $scope.name = 'Misko';
+      $scope.greet = function(name) {
+        return ctrl.prefix + name + ctrl.suffix;
+      };
+
+      $scope.protoGreet = bind(this, this.protoGreet);
+    };
+    $window.Greeter.prototype = {
+      suffix: '!',
+      protoGreet: function(name) {
+        return this.prefix + name + this.suffix;
+      }
+    };
+
+    $window.Child = function($scope) {
+      $scope.name = 'Adam';
+    };
+  }));
+
+  afterEach(function() {
+    dealoc(element);
+  });
+
+
+  it('should instantiate controller and bind methods', inject(function($compile, $rootScope) {
+    element = $compile('<div ng:controller="Greeter">{{greet(name)}}</div>')($rootScope);
+    $rootScope.$digest();
+    expect(element.text()).toBe('Hello Misko!');
+  }));
+
+
+  it('should allow nested controllers', inject(function($compile, $rootScope) {
+    element = $compile('<div ng:controller="Greeter"><div ng:controller="Child">{{greet(name)}}</div></div>')($rootScope);
+    $rootScope.$digest();
+    expect(element.text()).toBe('Hello Adam!');
+    dealoc(element);
+
+    element = $compile('<div ng:controller="Greeter"><div ng:controller="Child">{{protoGreet(name)}}</div></div>')($rootScope);
+    $rootScope.$digest();
+    expect(element.text()).toBe('Hello Adam!');
+  }));
+
+
+  it('should instantiate controller defined on scope', inject(function($compile, $rootScope) {
+    $rootScope.Greeter = function($scope) {
+      $scope.name = 'Vojta';
+    };
+
+    element = $compile('<div ng:controller="Greeter">{{name}}</div>')($rootScope);
+    $rootScope.$digest();
+    expect(element.text()).toBe('Vojta');
+  }));
+});
diff --git a/test/directive/ngEventDirsSpec.js b/test/directive/ngEventDirsSpec.js
new file mode 100644
index 00000000..2b14bb33
--- /dev/null
+++ b/test/directive/ngEventDirsSpec.js
@@ -0,0 +1,25 @@
+'use strict';
+
+describe('event directives', function() {
+  var element;
+
+
+  afterEach(function() {
+    dealoc(element);
+  });
+
+
+  describe('ng:submit', function() {
+
+    it('should get called on form submit', inject(function($rootScope, $compile) {
+      element = $compile('<form action="" ng:submit="submitted = true">' +
+        '<input type="submit"/>' +
+        '</form>')($rootScope);
+      $rootScope.$digest();
+      expect($rootScope.submitted).not.toBeDefined();
+
+      browserTrigger(element.children()[0]);
+      expect($rootScope.submitted).toEqual(true);
+    }));
+  });
+});
diff --git a/test/directive/ngIncludeSpec.js b/test/directive/ngIncludeSpec.js
new file mode 100644
index 00000000..79215096
--- /dev/null
+++ b/test/directive/ngIncludeSpec.js
@@ -0,0 +1,274 @@
+'use strict';
+
+describe('ng:include', function() {
+  var element;
+
+
+  afterEach(function(){
+    dealoc(element);
+  });
+
+
+  function putIntoCache(url, content) {
+    return function($templateCache) {
+      $templateCache.put(url, [200, content, {}]);
+    };
+  }
+
+
+  it('should include on external file', inject(putIntoCache('myUrl', '{{name}}'),
+      function($rootScope, $compile, $browser) {
+    element = jqLite('<ng:include src="url" scope="childScope"></ng:include>');
+    element = $compile(element)($rootScope);
+    $rootScope.childScope = $rootScope.$new();
+    $rootScope.childScope.name = 'misko';
+    $rootScope.url = 'myUrl';
+    $rootScope.$digest();
+    expect(element.text()).toEqual('misko');
+  }));
+
+
+  it('should remove previously included text if a falsy value is bound to src', inject(
+        putIntoCache('myUrl', '{{name}}'),
+        function($rootScope, $compile, $browser) {
+    element = jqLite('<ng:include src="url" scope="childScope"></ng:include>');
+    element = $compile(element)($rootScope);
+    $rootScope.childScope = $rootScope.$new();
+    $rootScope.childScope.name = 'igor';
+    $rootScope.url = 'myUrl';
+    $rootScope.$digest();
+
+    expect(element.text()).toEqual('igor');
+
+    $rootScope.url = undefined;
+    $rootScope.$digest();
+
+    expect(element.text()).toEqual('');
+  }));
+
+
+  it('should allow this for scope', inject(putIntoCache('myUrl', '{{"abc"}}'),
+        function($rootScope, $compile, $browser) {
+    element = jqLite('<ng:include src="url" scope="this"></ng:include>');
+    element = $compile(element)($rootScope);
+    $rootScope.url = 'myUrl';
+    $rootScope.$digest();
+
+    // TODO(misko): because we are using scope==this, the eval gets registered
+    // during the flush phase and hence does not get called.
+    // I don't think passing 'this' makes sense. Does having scope on ng:include makes sense?
+    // should we make scope="this" illegal?
+    $rootScope.$digest();
+
+    expect(element.text()).toEqual('abc');
+  }));
+
+
+  it('should fire $contentLoaded event after linking the content', inject(
+      function($rootScope, $compile, $templateCache) {
+    var contentLoadedSpy = jasmine.createSpy('content loaded').andCallFake(function() {
+      expect(element.text()).toBe('partial content');
+    });
+
+    $templateCache.put('url', [200, 'partial content', {}]);
+    $rootScope.$on('$contentLoaded', contentLoadedSpy);
+
+    element = $compile('<ng:include src="\'url\'"></ng:include>')($rootScope);
+    $rootScope.$digest();
+
+    expect(contentLoadedSpy).toHaveBeenCalledOnce();
+  }));
+
+
+  it('should evaluate onload expression when a partial is loaded', inject(
+      putIntoCache('myUrl', 'my partial'),
+      function($rootScope, $compile, $browser) {
+    element = jqLite('<ng:include src="url" onload="loaded = true"></ng:include>');
+    element = $compile(element)($rootScope);
+
+    expect($rootScope.loaded).not.toBeDefined();
+
+    $rootScope.url = 'myUrl';
+    $rootScope.$digest();
+
+    expect(element.text()).toEqual('my partial');
+    expect($rootScope.loaded).toBe(true);
+  }));
+
+
+  it('should destroy old scope', inject(putIntoCache('myUrl', 'my partial'),
+        function($rootScope, $compile, $browser) {
+    element = jqLite('<ng:include src="url"></ng:include>');
+    element = $compile(element)($rootScope);
+
+    expect($rootScope.$$childHead).toBeFalsy();
+
+    $rootScope.url = 'myUrl';
+    $rootScope.$digest();
+    expect($rootScope.$$childHead).toBeTruthy();
+
+    $rootScope.url = null;
+    $rootScope.$digest();
+    expect($rootScope.$$childHead).toBeFalsy();
+  }));
+
+
+  it('should do xhr request and cache it',
+      inject(function($rootScope, $httpBackend, $compile, $browser) {
+    element = $compile('<ng:include src="url"></ng:include>')($rootScope);
+    $httpBackend.expect('GET', 'myUrl').respond('my partial');
+
+    $rootScope.url = 'myUrl';
+    $rootScope.$digest();
+    $httpBackend.flush();
+    expect(element.text()).toEqual('my partial');
+
+    $rootScope.url = null;
+    $rootScope.$digest();
+    expect(element.text()).toEqual('');
+
+    $rootScope.url = 'myUrl';
+    $rootScope.$digest();
+    expect(element.text()).toEqual('my partial');
+    dealoc($rootScope);
+  }));
+
+
+  it('should clear content when error during xhr request',
+      inject(function($httpBackend, $compile, $rootScope) {
+    element = $compile('<ng:include src="url">content</ng:include>')($rootScope);
+    $httpBackend.expect('GET', 'myUrl').respond(404, '');
+
+    $rootScope.url = 'myUrl';
+    $rootScope.$digest();
+    $httpBackend.flush();
+
+    expect(element.text()).toBe('');
+  }));
+
+
+  it('should be async even if served from cache', inject(
+        putIntoCache('myUrl', 'my partial'),
+        function($rootScope, $compile, $browser) {
+    element = $compile('<ng:include src="url"></ng:include>')($rootScope);
+
+    $rootScope.url = 'myUrl';
+
+    var called = 0;
+    // we want to assert only during first watch
+    $rootScope.$watch(function() {
+      if (!called++) expect(element.text()).toBe('');
+    });
+
+    $rootScope.$digest();
+    expect(element.text()).toBe('my partial');
+  }));
+
+
+  it('should discard pending xhr callbacks if a new template is requested before the current ' +
+      'finished loading', inject(function($rootScope, $compile, $httpBackend) {
+    element = jqLite("<ng:include src='templateUrl'></ng:include>");
+    var log = [];
+
+    $rootScope.templateUrl = 'myUrl1';
+    $rootScope.logger = function(msg) {
+      log.push(msg);
+    }
+    $compile(element)($rootScope);
+    expect(log.join('; ')).toEqual('');
+
+    $httpBackend.expect('GET', 'myUrl1').respond('<div>{{logger("url1")}}</div>');
+    $rootScope.$digest();
+    expect(log.join('; ')).toEqual('');
+    $rootScope.templateUrl = 'myUrl2';
+    $httpBackend.expect('GET', 'myUrl2').respond('<div>{{logger("url2")}}</div>');
+    $rootScope.$digest();
+    $httpBackend.flush(); // now that we have two requests pending, flush!
+
+    expect(log.join('; ')).toEqual('url2; url2'); // it's here twice because we go through at
+                                                  // least two digest cycles
+  }));
+
+
+  it('should compile only the content', inject(function($compile, $rootScope, $templateCache) {
+    // regression
+
+    var onload = jasmine.createSpy('$contentLoaded');
+    $rootScope.$on('$contentLoaded', onload);
+    $templateCache.put('tpl.html', [200, 'partial {{tpl}}', {}]);
+
+    element = $compile('<div><div ng:repeat="i in [1]">' +
+        '<ng:include src="tpl"></ng:include></div></div>')($rootScope);
+    expect(onload).not.toHaveBeenCalled();
+
+    $rootScope.$apply(function() {
+      $rootScope.tpl = 'tpl.html';
+    });
+    expect(onload).toHaveBeenCalledOnce();
+  }));
+
+
+  describe('autoscoll', function() {
+    var autoScrollSpy;
+
+    function spyOnAnchorScroll() {
+      return function($provide) {
+        autoScrollSpy = jasmine.createSpy('$anchorScroll');
+        $provide.value('$anchorScroll', autoScrollSpy);
+      };
+    }
+
+    function compileAndLink(tpl) {
+      return function($compile, $rootScope) {
+        element = $compile(tpl)($rootScope);
+      };
+    }
+
+    function changeTplAndValueTo(template, value) {
+      return function($rootScope, $browser) {
+        $rootScope.$apply(function() {
+          $rootScope.tpl = template;
+          $rootScope.value = value;
+        });
+      };
+    }
+
+    beforeEach(module(spyOnAnchorScroll()));
+    beforeEach(inject(
+        putIntoCache('template.html', 'CONTENT'),
+        putIntoCache('another.html', 'CONTENT')));
+
+
+    it('should call $anchorScroll if autoscroll attribute is present', inject(
+        compileAndLink('<ng:include src="tpl" autoscroll></ng:include>'),
+        changeTplAndValueTo('template.html'), function() {
+      expect(autoScrollSpy).toHaveBeenCalledOnce();
+    }));
+
+
+    it('should call $anchorScroll if autoscroll evaluates to true', inject(
+        compileAndLink('<ng:include src="tpl" autoscroll="value"></ng:include>'),
+        changeTplAndValueTo('template.html', true),
+        changeTplAndValueTo('another.html', 'some-string'),
+        changeTplAndValueTo('template.html', 100), function() {
+      expect(autoScrollSpy).toHaveBeenCalled();
+      expect(autoScrollSpy.callCount).toBe(3);
+    }));
+
+
+    it('should not call $anchorScroll if autoscroll attribute is not present', inject(
+        compileAndLink('<ng:include src="tpl"></ng:include>'),
+        changeTplAndValueTo('template.html'), function() {
+      expect(autoScrollSpy).not.toHaveBeenCalled();
+    }));
+
+
+    it('should not call $anchorScroll if autoscroll evaluates to false', inject(
+        compileAndLink('<ng:include src="tpl" autoscroll="value"></ng:include>'),
+        changeTplAndValueTo('template.html', false),
+        changeTplAndValueTo('template.html', undefined),
+        changeTplAndValueTo('template.html', null), function() {
+      expect(autoScrollSpy).not.toHaveBeenCalled();
+    }));
+  });
+});
diff --git a/test/directive/ngInitSpec.js b/test/directive/ngInitSpec.js
new file mode 100644
index 00000000..b096c7fd
--- /dev/null
+++ b/test/directive/ngInitSpec.js
@@ -0,0 +1,16 @@
+'use strict';
+
+describe('ng:init', function() {
+  var element;
+
+
+  afterEach(function() {
+    dealoc(element);
+  });
+
+
+  it("should ng:init", inject(function($rootScope, $compile) {
+    element = $compile('<div ng:init="a=123"></div>')($rootScope);
+    expect($rootScope.a).toEqual(123);
+  }));
+});
diff --git a/test/directive/ngNonBindableSpec.js b/test/directive/ngNonBindableSpec.js
new file mode 100644
index 00000000..c974948d
--- /dev/null
+++ b/test/directive/ngNonBindableSpec.js
@@ -0,0 +1,20 @@
+'use strict';
+
+
+describe('ng:non-bindable', function() {
+  var element;
+
+
+  afterEach(function(){
+    dealoc(element);
+  });
+
+
+  it('should prevent compilation of the owning element and its children',
+      inject(function($rootScope, $compile) {
+    element = $compile('<div ng:non-bindable><span ng:bind="name"></span></div>')($rootScope);
+    $rootScope.name =  'misko';
+    $rootScope.$digest();
+    expect(element.text()).toEqual('');
+  }));
+});
diff --git a/test/directive/ngPluralizeSpec.js b/test/directive/ngPluralizeSpec.js
new file mode 100644
index 00000000..8046f45f
--- /dev/null
+++ b/test/directive/ngPluralizeSpec.js
@@ -0,0 +1,136 @@
+'use strict';
+
+describe('ng:pluralize', function() {
+  var element;
+
+
+  afterEach(function(){
+    dealoc(element);
+  });
+
+
+  describe('deal with pluralized strings without offset', function() {
+     beforeEach(inject(function($rootScope, $compile) {
+        element = $compile(
+          '<ng:pluralize count="email"' +
+                         "when=\"{'0': 'You have no new email'," +
+                                 "'one': 'You have one new email'," +
+                                 "'other': 'You have {} new emails'}\">" +
+          '</ng:pluralize>')($rootScope);
+      }));
+
+
+      it('should show single/plural strings', inject(function($rootScope) {
+        $rootScope.email = 0;
+        $rootScope.$digest();
+        expect(element.text()).toBe('You have no new email');
+
+        $rootScope.email = '0';
+        $rootScope.$digest();
+        expect(element.text()).toBe('You have no new email');
+
+        $rootScope.email = 1;
+        $rootScope.$digest();
+        expect(element.text()).toBe('You have one new email');
+
+        $rootScope.email = 0.01;
+        $rootScope.$digest();
+        expect(element.text()).toBe('You have 0.01 new emails');
+
+        $rootScope.email = '0.1';
+        $rootScope.$digest();
+        expect(element.text()).toBe('You have 0.1 new emails');
+
+        $rootScope.email = 2;
+        $rootScope.$digest();
+        expect(element.text()).toBe('You have 2 new emails');
+
+        $rootScope.email = -0.1;
+        $rootScope.$digest();
+        expect(element.text()).toBe('You have -0.1 new emails');
+
+        $rootScope.email = '-0.01';
+        $rootScope.$digest();
+        expect(element.text()).toBe('You have -0.01 new emails');
+
+        $rootScope.email = -2;
+        $rootScope.$digest();
+        expect(element.text()).toBe('You have -2 new emails');
+      }));
+
+
+      it('should show single/plural strings with mal-formed inputs', inject(function($rootScope) {
+        $rootScope.email = '';
+        $rootScope.$digest();
+        expect(element.text()).toBe('');
+
+        $rootScope.email = null;
+        $rootScope.$digest();
+        expect(element.text()).toBe('');
+
+        $rootScope.email = undefined;
+        $rootScope.$digest();
+        expect(element.text()).toBe('');
+
+        $rootScope.email = 'a3';
+        $rootScope.$digest();
+        expect(element.text()).toBe('');
+
+        $rootScope.email = '011';
+        $rootScope.$digest();
+        expect(element.text()).toBe('You have 11 new emails');
+
+        $rootScope.email = '-011';
+        $rootScope.$digest();
+        expect(element.text()).toBe('You have -11 new emails');
+
+        $rootScope.email = '1fff';
+        $rootScope.$digest();
+        expect(element.text()).toBe('You have one new email');
+
+        $rootScope.email = '0aa22';
+        $rootScope.$digest();
+        expect(element.text()).toBe('You have no new email');
+
+        $rootScope.email = '000001';
+        $rootScope.$digest();
+        expect(element.text()).toBe('You have one new email');
+      }));
+  });
+
+
+  describe('deal with pluralized strings with offset', function() {
+    it('should show single/plural strings with offset', inject(function($rootScope, $compile) {
+      element = $compile(
+        "<ng:pluralize count=\"viewCount\"  offset=2 " +
+            "when=\"{'0': 'Nobody is viewing.'," +
+                    "'1': '{{p1}} is viewing.'," +
+                    "'2': '{{p1}} and {{p2}} are viewing.'," +
+                    "'one': '{{p1}}, {{p2}} and one other person are viewing.'," +
+                    "'other': '{{p1}}, {{p2}} and {} other people are viewing.'}\">" +
+        "</ng:pluralize>")($rootScope);
+      $rootScope.p1 = 'Igor';
+      $rootScope.p2 = 'Misko';
+
+      $rootScope.viewCount = 0;
+      $rootScope.$digest();
+      expect(element.text()).toBe('Nobody is viewing.');
+
+      $rootScope.viewCount = 1;
+      $rootScope.$digest();
+      expect(element.text()).toBe('Igor is viewing.');
+
+      $rootScope.viewCount = 2;
+      $rootScope.$digest();
+      expect(element.text()).toBe('Igor and Misko are viewing.');
+
+      $rootScope.viewCount = 3;
+      $rootScope.$digest();
+      expect(element.text()).toBe('Igor, Misko and one other person are viewing.');
+
+      $rootScope.viewCount = 4;
+      $rootScope.$digest();
+      expect(element.text()).toBe('Igor, Misko and 2 other people are viewing.');
+    }));
+  });
+});
diff --git a/test/directive/ngRepeatSpec.js b/test/directive/ngRepeatSpec.js
new file mode 100644
index 00000000..8400edaa
--- /dev/null
+++ b/test/directive/ngRepeatSpec.js
@@ -0,0 +1,282 @@
+'use strict';
+
+describe('ng:repeat', function() {
+  var element;
+
+
+  afterEach(function(){
+    dealoc(element);
+  });
+
+
+  it('should ng:repeat over array', inject(function($rootScope, $compile) {
+    element = $compile(
+      '<ul>' +
+        '<li ng:repeat="item in items" ng:init="suffix = \';\'" ng:bind="item + suffix"></li>' +
+      '</ul>')($rootScope);
+
+    Array.prototype.extraProperty = "should be ignored";
+    // INIT
+    $rootScope.items = ['misko', 'shyam'];
+    $rootScope.$digest();
+    expect(element.find('li').length).toEqual(2);
+    expect(element.text()).toEqual('misko;shyam;');
+    delete Array.prototype.extraProperty;
+
+    // GROW
+    $rootScope.items = ['adam', 'kai', 'brad'];
+    $rootScope.$digest();
+    expect(element.find('li').length).toEqual(3);
+    expect(element.text()).toEqual('adam;kai;brad;');
+
+    // SHRINK
+    $rootScope.items = ['brad'];
+    $rootScope.$digest();
+    expect(element.find('li').length).toEqual(1);
+    expect(element.text()).toEqual('brad;');
+  }));
+
+
+  it('should ng:repeat over object', inject(function($rootScope, $compile) {
+    element = $compile(
+      '<ul>' +
+        '<li ng:repeat="(key, value) in items" ng:bind="key + \':\' + value + \';\' "></li>' +
+      '</ul>')($rootScope);
+    $rootScope.items = {misko:'swe', shyam:'set'};
+    $rootScope.$digest();
+    expect(element.text()).toEqual('misko:swe;shyam:set;');
+  }));
+
+
+  it('should not ng:repeat over parent properties', inject(function($rootScope, $compile) {
+    var Class = function() {};
+    Class.prototype.abc = function() {};
+    Class.prototype.value = 'abc';
+
+    element = $compile(
+      '<ul>' +
+        '<li ng:repeat="(key, value) in items" ng:bind="key + \':\' + value + \';\' "></li>' +
+      '</ul>')($rootScope);
+    $rootScope.items = new Class();
+    $rootScope.items.name = 'value';
+    $rootScope.$digest();
+    expect(element.text()).toEqual('name:value;');
+  }));
+
+
+  it('should error on wrong parsing of ng:repeat', inject(function($rootScope, $compile, $log) {
+    expect(function() {
+      element = $compile('<ul><li ng:repeat="i dont parse"></li></ul>')($rootScope);
+    }).toThrow("Expected ng:repeat in form of '_item_ in _collection_' but got 'i dont parse'.");
+
+    $log.error.logs.shift();
+  }));
+
+
+  it('should expose iterator offset as $index when iterating over arrays',
+      inject(function($rootScope, $compile) {
+    element = $compile(
+      '<ul>' +
+        '<li ng:repeat="item in items" ng:bind="item + $index + \'|\'"></li>' +
+      '</ul>')($rootScope);
+    $rootScope.items = ['misko', 'shyam', 'frodo'];
+    $rootScope.$digest();
+    expect(element.text()).toEqual('misko0|shyam1|frodo2|');
+  }));
+
+
+  it('should expose iterator offset as $index when iterating over objects',
+      inject(function($rootScope, $compile) {
+    element = $compile(
+      '<ul>' +
+        '<li ng:repeat="(key, val) in items" ng:bind="key + \':\' + val + $index + \'|\'"></li>' +
+      '</ul>')($rootScope);
+    $rootScope.items = {'misko':'m', 'shyam':'s', 'frodo':'f'};
+    $rootScope.$digest();
+    expect(element.text()).toEqual('frodo:f0|misko:m1|shyam:s2|');
+  }));
+
+
+  it('should expose iterator position as $position when iterating over arrays',
+      inject(function($rootScope, $compile) {
+    element = $compile(
+      '<ul>' +
+        '<li ng:repeat="item in items" ng:bind="item + \':\' + $position + \'|\'"></li>' +
+      '</ul>')($rootScope);
+    $rootScope.items = ['misko', 'shyam', 'doug'];
+    $rootScope.$digest();
+    expect(element.text()).toEqual('misko:first|shyam:middle|doug:last|');
+
+    $rootScope.items.push('frodo');
+    $rootScope.$digest();
+    expect(element.text()).toEqual('misko:first|shyam:middle|doug:middle|frodo:last|');
+
+    $rootScope.items.pop();
+    $rootScope.items.pop();
+    $rootScope.$digest();
+    expect(element.text()).toEqual('misko:first|shyam:last|');
+  }));
+
+
+  it('should expose iterator position as $position when iterating over objects',
+      inject(function($rootScope, $compile) {
+    element = $compile(
+      '<ul>' +
+        '<li ng:repeat="(key, val) in items" ng:bind="key + \':\' + val + \':\' + $position + \'|\'">' +
+        '</li>' +
+      '</ul>')($rootScope);
+    $rootScope.items = {'misko':'m', 'shyam':'s', 'doug':'d', 'frodo':'f'};
+    $rootScope.$digest();
+    expect(element.text()).toEqual('doug:d:first|frodo:f:middle|misko:m:middle|shyam:s:last|');
+
+    delete $rootScope.items.doug;
+    delete $rootScope.items.frodo;
+    $rootScope.$digest();
+    expect(element.text()).toEqual('misko:m:first|shyam:s:last|');
+  }));
+
+
+  it('should ignore $ and $$ properties', inject(function($rootScope, $compile) {
+    element = $compile('<ul><li ng:repeat="i in items">{{i}}|</li></ul>')($rootScope);
+    $rootScope.items = ['a', 'b', 'c'];
+    $rootScope.items.$$hashkey = 'xxx';
+    $rootScope.items.$root = 'yyy';
+    $rootScope.$digest();
+
+    expect(element.text()).toEqual('a|b|c|');
+  }));
+
+
+  it('should repeat over nested arrays', inject(function($rootScope, $compile) {
+    element = $compile(
+      '<ul>' +
+        '<li ng:repeat="subgroup in groups">' +
+          '<div ng:repeat="group in subgroup">{{group}}|</div>X' +
+        '</li>' +
+      '</ul>')($rootScope);
+    $rootScope.groups = [['a', 'b'], ['c','d']];
+    $rootScope.$digest();
+
+    expect(element.text()).toEqual('a|b|Xc|d|X');
+  }));
+
+
+  it('should ignore non-array element properties when iterating over an array',
+      inject(function($rootScope, $compile) {
+    element = $compile('<ul><li ng:repeat="item in array">{{item}}|</li></ul>')($rootScope);
+    $rootScope.array = ['a', 'b', 'c'];
+    $rootScope.array.foo = '23';
+    $rootScope.array.bar = function() {};
+    $rootScope.$digest();
+
+    expect(element.text()).toBe('a|b|c|');
+  }));
+
+
+  it('should iterate over non-existent elements of a sparse array',
+      inject(function($rootScope, $compile) {
+    element = $compile('<ul><li ng:repeat="item in array">{{item}}|</li></ul>')($rootScope);
+    $rootScope.array = ['a', 'b'];
+    $rootScope.array[4] = 'c';
+    $rootScope.array[6] = 'd';
+    $rootScope.$digest();
+
+    expect(element.text()).toBe('a|b|||c||d|');
+  }));
+
+
+  it('should iterate over all kinds of types', inject(function($rootScope, $compile) {
+    element = $compile('<ul><li ng:repeat="item in array">{{item}}|</li></ul>')($rootScope);
+    $rootScope.array = ['a', 1, null, undefined, {}];
+    $rootScope.$digest();
+
+    expect(element.text()).toMatch(/a\|1\|\|\|\{\s*\}\|/);
+  }));
+
+
+  describe('stability', function() {
+    var a, b, c, d, lis;
+
+    beforeEach(inject(function($rootScope, $compile) {
+      element = $compile(
+        '<ul>' +
+          '<li ng:repeat="item in items" ng:bind="key + \':\' + val + \':\' + $position + \'|\'"></li>' +
+        '</ul>')($rootScope);
+      a = {};
+      b = {};
+      c = {};
+      d = {};
+
+      $rootScope.items = [a, b, c];
+      $rootScope.$digest();
+      lis = element.find('li');
+    }));
+
+
+    it('should preserve the order of elements', inject(function($rootScope) {
+      $rootScope.items = [a, c, d];
+      $rootScope.$digest();
+      var newElements = element.find('li');
+      expect(newElements[0]).toEqual(lis[0]);
+      expect(newElements[1]).toEqual(lis[2]);
+      expect(newElements[2]).not.toEqual(lis[1]);
+    }));
+
+
+    it('should support duplicates', inject(function($rootScope) {
+      $rootScope.items = [a, a, b, c];
+      $rootScope.$digest();
+      var newElements = element.find('li');
+      expect(newElements[0]).toEqual(lis[0]);
+      expect(newElements[1]).not.toEqual(lis[0]);
+      expect(newElements[2]).toEqual(lis[1]);
+      expect(newElements[3]).toEqual(lis[2]);
+
+      lis = newElements;
+      $rootScope.$digest();
+      newElements = element.find('li');
+      expect(newElements[0]).toEqual(lis[0]);
+      expect(newElements[1]).toEqual(lis[1]);
+      expect(newElements[2]).toEqual(lis[2]);
+      expect(newElements[3]).toEqual(lis[3]);
+
+      $rootScope.$digest();
+      newElements = element.find('li');
+      expect(newElements[0]).toEqual(lis[0]);
+      expect(newElements[1]).toEqual(lis[1]);
+      expect(newElements[2]).toEqual(lis[2]);
+      expect(newElements[3]).toEqual(lis[3]);
+    }));
+
+
+    it('should remove last item when one duplicate instance is removed',
+        inject(function($rootScope) {
+      $rootScope.items = [a, a, a];
+      $rootScope.$digest();
+      lis = element.find('li');
+
+      $rootScope.items = [a, a];
+      $rootScope.$digest();
+      var newElements = element.find('li');
+      expect(newElements.length).toEqual(2);
+      expect(newElements[0]).toEqual(lis[0]);
+      expect(newElements[1]).toEqual(lis[1]);
+    }));
+
+
+    it('should reverse items when the collection is reversed',
+        inject(function($rootScope) {
+      $rootScope.items = [a, b, c];
+      $rootScope.$digest();
+      lis = element.find('li');
+
+      $rootScope.items = [c, b, a];
+      $rootScope.$digest();
+      var newElements = element.find('li');
+      expect(newElements.length).toEqual(3);
+      expect(newElements[0]).toEqual(lis[2]);
+      expect(newElements[1]).toEqual(lis[1]);
+      expect(newElements[2]).toEqual(lis[0]);
+    }));
+  });
+});
diff --git a/test/directive/ngShowHideSpec.js b/test/directive/ngShowHideSpec.js
new file mode 100644
index 00000000..6b9aea24
--- /dev/null
+++ b/test/directive/ngShowHideSpec.js
@@ -0,0 +1,43 @@
+'use strict';
+
+describe('ng:show / ng:hide', function() {
+  var element;
+
+
+  afterEach(function() {
+    dealoc(element);
+  });
+
+  describe('ng:show', function() {
+    it('should show and hide an element', inject(function($rootScope, $compile) {
+      element = jqLite('<div ng:show="exp"></div>');
+      element = $compile(element)($rootScope);
+      $rootScope.$digest();
+      expect(isCssVisible(element)).toEqual(false);
+      $rootScope.exp = true;
+      $rootScope.$digest();
+      expect(isCssVisible(element)).toEqual(true);
+    }));
+
+
+    it('should make hidden element visible', inject(function($rootScope, $compile) {
+      element = jqLite('<div style="display: none" ng:show="exp"></div>');
+      element = $compile(element)($rootScope);
+      expect(isCssVisible(element)).toBe(false);
+      $rootScope.exp = true;
+      $rootScope.$digest();
+      expect(isCssVisible(element)).toBe(true);
+    }));
+  });
+
+  describe('ng:hide', function() {
+    it('should hide an element', inject(function($rootScope, $compile) {
+      element = jqLite('<div ng:hide="exp"></div>');
+      element = $compile(element)($rootScope);
+      expect(isCssVisible(element)).toBe(true);
+      $rootScope.exp = true;
+      $rootScope.$digest();
+      expect(isCssVisible(element)).toBe(false);
+    }));
+  });
+});
diff --git a/test/directive/ngStyleSpec.js b/test/directive/ngStyleSpec.js
new file mode 100644
index 00000000..a413353b
--- /dev/null
+++ b/test/directive/ngStyleSpec.js
@@ -0,0 +1,88 @@
+'use strict';
+
+describe('ng:style', function() {
+  var element;
+
+
+  afterEach(function() {
+    dealoc(element);
+  });
+
+
+  it('should set', inject(function($rootScope, $compile) {
+    element = $compile('<div ng:style="{height: \'40px\'}"></div>')($rootScope);
+    $rootScope.$digest();
+    expect(element.css('height')).toEqual('40px');
+  }));
+
+
+  it('should silently ignore undefined style', inject(function($rootScope, $compile) {
+    element = $compile('<div ng:style="myStyle"></div>')($rootScope);
+    $rootScope.$digest();
+    expect(element.hasClass('ng-exception')).toBeFalsy();
+  }));
+
+
+  describe('preserving styles set before and after compilation', function() {
+    var scope, preCompStyle, preCompVal, postCompStyle, postCompVal, element;
+
+    beforeEach(inject(function($rootScope, $compile) {
+      preCompStyle = 'width';
+      preCompVal = '300px';
+      postCompStyle = 'height';
+      postCompVal = '100px';
+      element = jqLite('<div ng:style="styleObj"></div>');
+      element.css(preCompStyle, preCompVal);
+      jqLite(document.body).append(element);
+      $compile(element)($rootScope);
+      scope = $rootScope;
+      scope.styleObj = {'margin-top': '44px'};
+      scope.$apply();
+      element.css(postCompStyle, postCompVal);
+    }));
+
+    afterEach(function() {
+      element.remove();
+    });
+
+
+    it('should not mess up stuff after compilation', function() {
+      element.css('margin', '44px');
+      expect(element.css(preCompStyle)).toBe(preCompVal);
+      expect(element.css('margin-top')).toBe('44px');
+      expect(element.css(postCompStyle)).toBe(postCompVal);
+    });
+
+
+    it('should not mess up stuff after $apply with no model changes', function() {
+      element.css('padding-top', '33px');
+      scope.$apply();
+      expect(element.css(preCompStyle)).toBe(preCompVal);
+      expect(element.css('margin-top')).toBe('44px');
+      expect(element.css(postCompStyle)).toBe(postCompVal);
+      expect(element.css('padding-top')).toBe('33px');
+    });
+
+
+    it('should not mess up stuff after $apply with non-colliding model changes', function() {
+      scope.styleObj = {'padding-top': '99px'};
+      scope.$apply();
+      expect(element.css(preCompStyle)).toBe(preCompVal);
+      expect(element.css('margin-top')).not.toBe('44px');
+      expect(element.css('padding-top')).toBe('99px');
+      expect(element.css(postCompStyle)).toBe(postCompVal);
+    });
+
+
+    it('should overwrite original styles after a colliding model change', function() {
+      scope.styleObj = {'height': '99px', 'width': '88px'};
+      scope.$apply();
+      expect(element.css(preCompStyle)).toBe('88px');
+      expect(element.css(postCompStyle)).toBe('99px');
+      scope.styleObj = {};
+      scope.$apply();
+      expect(element.css(preCompStyle)).not.toBe('88px');
+      expect(element.css(postCompStyle)).not.toBe('99px');
+    });
+  });
+});
diff --git a/test/directive/ngSwitchSpec.js b/test/directive/ngSwitchSpec.js
new file mode 100644
index 00000000..88e81dea
--- /dev/null
+++ b/test/directive/ngSwitchSpec.js
@@ -0,0 +1,63 @@
+'use strict';
+
+describe('ng:switch', function() {
+  var element;
+
+
+  afterEach(function(){
+    dealoc(element);
+  });
+
+
+  it('should switch on value change', inject(function($rootScope, $compile) {
+    element = $compile(
+      '<div ng-switch="select">' +
+        '<div ng:switch-when="1">first:{{name}}</div>' +
+        '<div ng:switch-when="2">second:{{name}}</div>' +
+        '<div ng:switch-when="true">true:{{name}}</div>' +
+      '</div>')($rootScope);
+    expect(element.html()).toEqual(
+        '<!-- ngSwitchWhen: 1 --><!-- ngSwitchWhen: 2 --><!-- ngSwitchWhen: true -->');
+    $rootScope.select = 1;
+    $rootScope.$apply();
+    expect(element.text()).toEqual('first:');
+    $rootScope.name="shyam";
+    $rootScope.$apply();
+    expect(element.text()).toEqual('first:shyam');
+    $rootScope.select = 2;
+    $rootScope.$apply();
+    expect(element.text()).toEqual('second:shyam');
+    $rootScope.name = 'misko';
+    $rootScope.$apply();
+    expect(element.text()).toEqual('second:misko');
+    $rootScope.select = true;
+    $rootScope.$apply();
+    expect(element.text()).toEqual('true:misko');
+  }));
+
+
+  it('should switch on switch-when-default', inject(function($rootScope, $compile) {
+    element = $compile(
+      '<ng:switch on="select">' +
+        '<div ng:switch-when="1">one</div>' +
+        '<div ng:switch-default>other</div>' +
+      '</ng:switch>')($rootScope);
+    $rootScope.$apply();
+    expect(element.text()).toEqual('other');
+    $rootScope.select = 1;
+    $rootScope.$apply();
+    expect(element.text()).toEqual('one');
+  }));
+
+
+  it('should call change on switch', inject(function($rootScope, $compile) {
+    element = $compile(
+      '<ng:switch on="url" change="name=\'works\'">' +
+        '<div ng:switch-when="a">{{name}}</div>' +
+      '</ng:switch>')($rootScope);
+    $rootScope.url = 'a';
+    $rootScope.$apply();
+    expect($rootScope.name).toEqual('works');
+    expect(element.text()).toEqual('works');
+  }));
+});
diff --git a/test/directive/ngViewSpec.js b/test/directive/ngViewSpec.js
new file mode 100644
index 00000000..d74812d3
--- /dev/null
+++ b/test/directive/ngViewSpec.js
@@ -0,0 +1,413 @@
+'use strict';
+
+describe('ng:view', function() {
+  var element;
+
+  beforeEach(module(function() {
+    return function($rootScope, $compile) {
+      element = $compile('<ng:view onload="load()"></ng:view>')($rootScope);
+    };
+  }));
+
+
+  afterEach(function(){
+    dealoc(element);
+  });
+
+
+  it('should do nothing when no routes are defined',
+      inject(function($rootScope, $compile, $location) {
+    $location.path('/unknown');
+    $rootScope.$digest();
+    expect(element.text()).toEqual('');
+  }));
+
+
+  it('should instantiate controller after compiling the content', function() {
+    var log = [], controllerScope,
+        Ctrl = function($scope) {
+          controllerScope = $scope;
+          log.push('ctrl-init');
+        };
+
+    module(function($compileProvider, $routeProvider) {
+      $compileProvider.directive('compileLog', function() {
+        return {
+          compile: function() {
+            log.push('compile');
+          }
+        };
+      });
+
+      $routeProvider.when('/some', {template: '/tpl.html', controller: Ctrl});
+    });
+
+    inject(function($route, $rootScope, $templateCache, $location) {
+      $templateCache.put('/tpl.html', [200, '<div compile-log>partial</div>', {}]);
+      $location.path('/some');
+      $rootScope.$digest();
+
+      expect(controllerScope.$parent).toBe($rootScope);
+      expect(controllerScope).toBe($route.current.scope);
+      expect(log).toEqual(['compile', 'ctrl-init']);
+    });
+  });
+
+
+  it('should load content via xhr when route changes', function() {
+    module(function($routeProvider) {
+      $routeProvider.when('/foo', {template: 'myUrl1'});
+      $routeProvider.when('/bar', {template: 'myUrl2'});
+    });
+
+    inject(function($rootScope, $compile, $httpBackend, $location, $route) {
+      expect(element.text()).toEqual('');
+
+      $location.path('/foo');
+      $httpBackend.expect('GET', 'myUrl1').respond('<div>{{1+3}}</div>');
+      $rootScope.$digest();
+      $httpBackend.flush();
+      expect(element.text()).toEqual('4');
+
+      $location.path('/bar');
+      $httpBackend.expect('GET', 'myUrl2').respond('angular is da best');
+      $rootScope.$digest();
+      $httpBackend.flush();
+      expect(element.text()).toEqual('angular is da best');
+    });
+  });
+
+
+  it('should remove all content when location changes to an unknown route', function() {
+    module(function($routeProvider) {
+      $routeProvider.when('/foo', {template: 'myUrl1'});
+    });
+
+    inject(function($rootScope, $compile, $location, $httpBackend, $route) {
+      $location.path('/foo');
+      $httpBackend.expect('GET', 'myUrl1').respond('<div>{{1+3}}</div>');
+      $rootScope.$digest();
+      $httpBackend.flush();
+      expect(element.text()).toEqual('4');
+
+      $location.path('/unknown');
+      $rootScope.$digest();
+      expect(element.text()).toEqual('');
+    });
+  });
+
+
+  it('should chain scopes and propagate evals to the child scope', function() {
+    module(function($routeProvider) {
+      $routeProvider.when('/foo', {template: 'myUrl1'});
+    });
+
+    inject(function($rootScope, $compile, $location, $httpBackend, $route) {
+      $rootScope.parentVar = 'parent';
+
+      $location.path('/foo');
+      $httpBackend.expect('GET', 'myUrl1').respond('<div>{{parentVar}}</div>');
+      $rootScope.$digest();
+      $httpBackend.flush();
+      expect(element.text()).toEqual('parent');
+
+      $rootScope.parentVar = 'new parent';
+      $rootScope.$digest();
+      expect(element.text()).toEqual('new parent');
+    });
+  });
+
+
+  it('should be possible to nest ng:view in ng:include', inject(function() {
+    // TODO(vojta): refactor this test
+    dealoc(element);
+    var injector = angular.injector(['ng', 'ngMock', function($routeProvider) {
+      $routeProvider.when('/foo', {controller: angular.noop, template: 'viewPartial.html'});
+    }]);
+    var myApp = injector.get('$rootScope');
+    var $httpBackend = injector.get('$httpBackend');
+    $httpBackend.expect('GET', 'includePartial.html').respond('view: <ng:view></ng:view>');
+    injector.get('$location').path('/foo');
+
+    var $route = injector.get('$route');
+
+    element = injector.get('$compile')(
+        '<div>' +
+          'include: <ng:include src="\'includePartial.html\'"> </ng:include>' +
+        '</div>')(myApp);
+    myApp.$apply();
+
+    $httpBackend.expect('GET', 'viewPartial.html').respond('content');
+    $httpBackend.flush();
+
+    expect(element.text()).toEqual('include: view: content');
+    expect($route.current.template).toEqual('viewPartial.html');
+    dealoc(myApp);
+    dealoc(element);
+  }));
+
+
+  it('should initialize view template after the view controller was initialized even when ' +
+     'templates were cached', function() {
+     //this is a test for a regression that was introduced by making the ng:view cache sync
+    function ParentCtrl($scope) {
+       $scope.log.push('parent');
+    }
+
+    module(function($routeProvider) {
+      $routeProvider.when('/foo', {controller: ParentCtrl, template: 'viewPartial.html'});
+    });
+
+
+    inject(function($rootScope, $compile, $location, $httpBackend, $route) {
+      $rootScope.log = [];
+
+      $rootScope.ChildCtrl = function($scope) {
+        $scope.log.push('child');
+      };
+
+      $location.path('/foo');
+      $httpBackend.expect('GET', 'viewPartial.html').
+          respond('<div ng:init="log.push(\'init\')">' +
+                    '<div ng:controller="ChildCtrl"></div>' +
+                  '</div>');
+      $rootScope.$apply();
+      $httpBackend.flush();
+
+      expect($rootScope.log).toEqual(['parent', 'init', 'child']);
+
+      $location.path('/');
+      $rootScope.$apply();
+      expect($rootScope.log).toEqual(['parent', 'init', 'child']);
+
+      $rootScope.log = [];
+      $location.path('/foo');
+      $rootScope.$apply();
+
+      expect($rootScope.log).toEqual(['parent', 'init', 'child']);
+    });
+  });
+
+
+  it('should discard pending xhr callbacks if a new route is requested before the current ' +
+      'finished loading',  function() {
+    // this is a test for a bad race condition that affected feedback
+
+    module(function($routeProvider) {
+      $routeProvider.when('/foo', {template: 'myUrl1'});
+      $routeProvider.when('/bar', {template: 'myUrl2'});
+    });
+
+    inject(function($route, $rootScope, $location, $httpBackend) {
+      expect(element.text()).toEqual('');
+
+      $location.path('/foo');
+      $httpBackend.expect('GET', 'myUrl1').respond('<div>{{1+3}}</div>');
+      $rootScope.$digest();
+      $location.path('/bar');
+      $httpBackend.expect('GET', 'myUrl2').respond('<div>{{1+1}}</div>');
+      $rootScope.$digest();
+      $httpBackend.flush(); // now that we have two requests pending, flush!
+
+      expect(element.text()).toEqual('2');
+    });
+  });
+
+
+  it('should clear the content when error during xhr request', function() {
+    module(function($routeProvider) {
+      $routeProvider.when('/foo', {controller: noop, template: 'myUrl1'});
+    });
+
+    inject(function($route, $location, $rootScope, $httpBackend) {
+      $location.path('/foo');
+      $httpBackend.expect('GET', 'myUrl1').respond(404, '');
+      element.text('content');
+
+      $rootScope.$digest();
+      $httpBackend.flush();
+
+      expect(element.text()).toBe('');
+    });
+  });
+
+
+  it('should be async even if served from cache', function() {
+    module(function($routeProvider) {
+      $routeProvider.when('/foo', {controller: noop, template: 'myUrl1'});
+    });
+
+    inject(function($route, $rootScope, $location, $templateCache) {
+      $templateCache.put('myUrl1', [200, 'my partial', {}]);
+      $location.path('/foo');
+
+      var called = 0;
+      // we want to assert only during first watch
+      $rootScope.$watch(function() {
+        if (!called++) expect(element.text()).toBe('');
+      });
+
+      $rootScope.$digest();
+      expect(element.text()).toBe('my partial');
+    });
+  });
+
+  it('should fire $contentLoaded event when content compiled and linked', function() {
+    var log = [];
+    var logger = function(name) {
+      return function() {
+        log.push(name);
+      };
+    };
+    var Ctrl = function($scope) {
+      $scope.value = 'bound-value';
+      log.push('init-ctrl');
+    };
+
+    module(function($routeProvider) {
+      $routeProvider.when('/foo', {template: 'tpl.html', controller: Ctrl});
+    });
+
+    inject(function($templateCache, $rootScope, $location) {
+      $rootScope.$on('$beforeRouteChange', logger('$beforeRouteChange'));
+      $rootScope.$on('$afterRouteChange', logger('$afterRouteChange'));
+      $rootScope.$on('$contentLoaded', logger('$contentLoaded'));
+
+      $templateCache.put('tpl.html', [200, '{{value}}', {}]);
+      $location.path('/foo');
+      $rootScope.$digest();
+
+      expect(element.text()).toBe('bound-value');
+      expect(log).toEqual(['$beforeRouteChange', '$afterRouteChange', 'init-ctrl',
+                           '$contentLoaded']);
+    });
+  });
+
+  it('should destroy previous scope', function() {
+    module(function($routeProvider) {
+      $routeProvider.when('/foo', {template: 'tpl.html'});
+    });
+
+    inject(function($templateCache, $rootScope, $location) {
+      $templateCache.put('tpl.html', [200, 'partial', {}]);
+
+      expect($rootScope.$$childHead).toBeNull();
+      expect($rootScope.$$childTail).toBeNull();
+
+      $location.path('/foo');
+      $rootScope.$digest();
+
+      expect(element.text()).toBe('partial');
+      expect($rootScope.$$childHead).not.toBeNull();
+      expect($rootScope.$$childTail).not.toBeNull();
+
+      $location.path('/non/existing/route');
+      $rootScope.$digest();
+
+      expect(element.text()).toBe('');
+      expect($rootScope.$$childHead).toBeNull();
+      expect($rootScope.$$childTail).toBeNull();
+    });
+  });
+
+
+  it('should destroy previous scope if multiple route changes occur before server responds',
+      function() {
+    var log = [];
+    var createCtrl = function(name) {
+      return function($scope) {
+        log.push('init-' + name);
+        $scope.$on('$destroy', function() {
+          log.push('destroy-' + name);
+        });
+      };
+    };
+
+    module(function($routeProvider) {
+      $routeProvider.when('/one', {template: 'one.html', controller: createCtrl('ctrl1')});
+      $routeProvider.when('/two', {template: 'two.html', controller: createCtrl('ctrl2')});
+    });
+
+    inject(function($httpBackend, $rootScope, $location) {
+      $httpBackend.whenGET('one.html').respond('content 1');
+      $httpBackend.whenGET('two.html').respond('content 2');
+
+      $location.path('/one');
+      $rootScope.$digest();
+      $location.path('/two');
+      $rootScope.$digest();
+
+      $httpBackend.flush();
+      expect(element.text()).toBe('content 2');
+      expect(log).toEqual(['init-ctrl2']);
+
+      $location.path('/non-existing');
+      $rootScope.$digest();
+
+      expect(element.text()).toBe('');
+      expect(log).toEqual(['init-ctrl2', 'destroy-ctrl2']);
+
+      expect($rootScope.$$childHead).toBeNull();
+      expect($rootScope.$$childTail).toBeNull();
+    });
+  });
+
+
+  it('should $destroy scope after update and reload',  function() {
+    // this is a regression of bug, where $route doesn't copy scope when only updating
+
+    var log = [];
+
+    function logger(msg) {
+      return function() {
+        log.push(msg);
+      };
+    }
+
+    function createController(name) {
+      return function($scope) {
+        log.push('init-' + name);
+        $scope.$on('$destroy', logger('destroy-' + name));
+        $scope.$on('$routeUpdate', logger('route-update'));
+      };
+    }
+
+    module(function($routeProvider) {
+      $routeProvider.when('/bar', {template: 'tpl.html', controller: createController('bar')});
+      $routeProvider.when('/foo', {
+          template: 'tpl.html', controller: createController('foo'), reloadOnSearch: false});
+    });
+
+    inject(function($templateCache, $location, $rootScope) {
+      $templateCache.put('tpl.html', [200, 'partial', {}]);
+
+      $location.url('/foo');
+      $rootScope.$digest();
+      expect(log).toEqual(['init-foo']);
+
+      $location.search({q: 'some'});
+      $rootScope.$digest();
+      expect(log).toEqual(['init-foo', 'route-update']);
+
+      $location.url('/bar');
+      $rootScope.$digest();
+      expect(log).toEqual(['init-foo', 'route-update', 'destroy-foo', 'init-bar']);
+    });
+  });
+
+
+  it('should evaluate onload expression after linking the content', function() {
+    module(function($routeProvider) {
+      $routeProvider.when('/foo', {template: 'tpl.html'});
+    });
+
+    inject(function($templateCache, $location, $rootScope) {
+      $templateCache.put('tpl.html', [200, '{{1+1}}', {}]);
+      $rootScope.load = jasmine.createSpy('onload');
+
+      $location.url('/foo');
+      $rootScope.$digest();
+      expect($rootScope.load).toHaveBeenCalledOnce();
+    });
+  })
+});
diff --git a/test/directive/scriptSpec.js b/test/directive/scriptSpec.js
new file mode 100644
index 00000000..471e04ce
--- /dev/null
+++ b/test/directive/scriptSpec.js
@@ -0,0 +1,44 @@
+'use strict';
+
+describe('scriptDirective', function() {
+  var element;
+
+
+  afterEach(function(){
+    dealoc(element);
+  });
+
+
+  it('should populate $templateCache with contents of a ng-template script element', inject(
+      function($compile, $templateCache) {
+        if (msie <=8) return;
+        // in ie8 it is not possible to create a script tag with the right content.
+        // it always comes up as empty. I was trying to set the text of the
+        // script tag, but that did not work either, so I gave up.
+        $compile('<div>foo' +
+                   '<script id="/ignore">ignore me</script>' +
+                   '<script type="text/ng-template" id="/myTemplate.html"><x>{{y}}</x></script>' +
+                 '</div>' );
+        expect($templateCache.get('/myTemplate.html')).toBe('<x>{{y}}</x>');
+        expect($templateCache.get('/ignore')).toBeUndefined();
+      }
+  ));
+
+
+  it('should not compile scripts', inject(function($compile, $templateCache, $rootScope) {
+    if (msie <=8) return; // see above
+
+    var doc = jqLite('<div></div>');
+    // jQuery is too smart and removes
+    doc[0].innerHTML = '<script type="text/javascript">some {{binding}}</script>' +
+                       '<script type="text/ng-template" id="/some">other {{binding}}</script>';
+
+    $compile(doc)($rootScope);
+    $rootScope.$digest();
+
+    var scripts = doc.find('script');
+    expect(scripts.eq(0).text()).toBe('some {{binding}}');
+    expect(scripts.eq(1).text()).toBe('other {{binding}}');
+    dealoc(doc);
+  }));
+});
diff --git a/test/directive/selectSpec.js b/test/directive/selectSpec.js
new file mode 100644
index 00000000..c262d0cf
--- /dev/null
+++ b/test/directive/selectSpec.js
@@ -0,0 +1,855 @@
+'use strict';
+
+describe('select', function() {
+  var scope, formElement, element, $compile;
+
+  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;
+    $compile = $injector.get('$compile');
+    formElement = element = null;
+  }));
+
+  afterEach(function() {
+    dealoc(formElement);
+  });
+
+
+  describe('select-one', function() {
+
+    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.$apply(function() {
+        scope.a = 'foo';
+        scope.b = 'bar';
+      });
+
+      expect(element.text()).toBe('foobarC');
+    });
+
+
+    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.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.$apply(function() {
+        scope.selection = '';
+      });
+
+      expect(scope.form.select.error.REQUIRED).toBeTruthy();
+      expect(element).toBeInvalid();
+      expect(element).toBePristine();
+      expect(scope.log).toEqual('');
+
+      element[0].value = 'c';
+      browserTrigger(element, 'change');
+      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">' +
+          '<option value=""></option>' +
+          '<option value="c">C</option>' +
+        '</select>');
+
+      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.$apply(function() {
+        scope.selection = ['A'];
+      });
+
+      expect(element[0].childNodes[0].selected).toEqual(true);
+    });
+
+
+    it('should require', function() {
+      compile(
+        '<select name="select" ng:model="selection" multiple required>' +
+          '<option>A</option>' +
+          '<option>B</option>' +
+        '</select>');
+
+      scope.$apply(function() {
+        scope.selection = [];
+      });
+
+      expect(scope.form.select.error.REQUIRED).toBeTruthy();
+      expect(element).toBeInvalid();
+      expect(element).toBePristine();
+
+      scope.$apply(function() {
+        scope.selection = ['A'];
+      });
+
+      expect(element).toBeValid();
+      expect(element).toBePristine();
+
+      element[0].value = 'B';
+      browserTrigger(element, 'change');
+      expect(element).toBeValid();
+      expect(element).toBeDirty();
+    });
+  });
+
+
+  describe('ng:options', function() {
+    function createSelect(attrs, blank, unknown) {
+      var html = '<select';
+      forEach(attrs, function(value, key) {
+        if (isBoolean(value)) {
+          if (value) html += ' ' + key;
+        } else {
+          html += ' ' + key + '="' + value + '"';
+        }
+      });
+      html += '>' +
+        (blank ? (isString(blank) ? blank : '<option value="">blank</option>') : '') +
+        (unknown ? (isString(unknown) ? unknown : '<option value="?">unknown</option>') : '') +
+      '</select>';
+
+      compile(html);
+    }
+
+    function createSingleSelect(blank, unknown) {
+      createSelect({
+        'ng:model':'selected',
+        'ng:options':'value.name for value in values'
+      }, blank, unknown);
+    }
+
+    function createMultiSelect(blank, unknown) {
+      createSelect({
+        'ng:model':'selected',
+        'multiple':true,
+        'ng:options':'value.name for value in values'
+      }, blank, unknown);
+    }
+
+
+    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.$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:options': 'value as key for (key, value) in object'
+      });
+
+      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.$apply(function() {
+        scope.object.azur = '8888FF';
+      });
+
+      options = element.find('option');
+      expect(options[3].selected).toEqual(true);
+    });
+
+
+    it('should grow list', function() {
+      createSingleSelect();
+
+      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.$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.$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.$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.$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.$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.$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(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(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.$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.$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'
+        });
+
+        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'
+        });
+
+        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.$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.$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.$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.$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.$apply(function() {
+          scope.blankVal = 'so blank';
+          scope.values = [{name: 'A'}];
+        });
+
+        // check blank option is first and is compiled
+        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');
+
+        scope.$apply(function() {
+          scope.blankVal = 'not so blank';
+        });
+
+        // check blank option is first and is compiled
+        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.$apply(function() {
+          scope.blankVal = 'so blank';
+          scope.values = [{name: 'A'}];
+        });
+
+        // check blank option is first and is compiled
+        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.$apply(function() {
+          scope.blankVal = 'is blank';
+          scope.values = [{name: 'A'}];
+        });
+
+        // check blank option is first and is compiled
+        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.$apply(function() {
+          scope.blankVal = 'is blank';
+        });
+
+        // check blank option is first and is compiled
+        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');
+      });
+    });
+
+
+    describe('on change', function() {
+
+      it('should update model on change', function() {
+        createSingleSelect();
+
+        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.$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.$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.$apply(function() {
+          scope.values = [{name: 'A'}, {name: 'B'}];
+          scope.selected = [];
+        });
+
+        expect(element.find('option').length).toEqual(2);
+        expect(element.find('option')[0].selected).toBeFalsy();
+        expect(element.find('option')[1].selected).toBeFalsy();
+
+        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.$apply(function() {
+          scope.values = [{name: 'A'}, {name: 'B'}];
+          scope.selected = [];
+        });
+
+        element.find('option')[0].selected = true;
+
+        browserTrigger(element, 'change');
+        expect(scope.selected).toEqual([scope.values[0]]);
+      });
+
+      it('should select from object', function() {
+        createSelect({
+          'ng:model':'selected',
+          'multiple':true,
+          'ng:options':'key as value for (key,value) in values'
+        });
+        scope.values = {'0':'A', '1':'B'};
+
+        scope.selected = ['1'];
+        scope.$digest();
+        expect(element.find('option')[1].selected).toBe(true);
+
+        element.find('option')[0].selected = true;
+        browserTrigger(element, 'change');
+        expect(scope.selected).toEqual(['0', '1']);
+
+        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();
+      });
+    });
+  });
+
+
+  describe('OPTION value', function() {
+    beforeEach(function() {
+      this.addMatchers({
+        toHaveValue: function(expected){
+          this.message = function() {
+            return 'Expected "' + this.actual.html() + '" to have value="' + expected + '".';
+          };
+
+          var value;
+          htmlParser(this.actual.html(), {
+            start:function(tag, attrs){
+              value = attrs.value;
+            },
+            end:noop,
+            chars:noop
+          });
+          return trim(value) == trim(expected);
+        }
+      });
+    });
+
+
+    it('should populate value attribute on OPTION', inject(function($rootScope, $compile) {
+      element = $compile('<select ng:model="x"><option>abc</option></select>')($rootScope)
+      expect(element).toHaveValue('abc');
+    }));
+
+    it('should ignore value if already exists', inject(function($rootScope, $compile) {
+      element = $compile('<select ng:model="x"><option value="abc">xyz</option></select>')($rootScope)
+      expect(element).toHaveValue('abc');
+    }));
+
+    it('should set value even if newlines present', inject(function($rootScope, $compile) {
+      element = $compile('<select ng:model="x"><option attr="\ntext\n" \n>\nabc\n</option></select>')($rootScope)
+      expect(element).toHaveValue('\nabc\n');
+    }));
+
+    it('should set value even if self closing HTML', inject(function($rootScope, $compile) {
+      // IE removes the \n from option, which makes this test pointless
+      if (msie) return;
+      element = $compile('<select ng:model="x"><option>\n</option></select>')($rootScope)
+      expect(element).toHaveValue('\n');
+    }));
+  });
+});
diff --git a/test/directive/styleSpec.js b/test/directive/styleSpec.js
new file mode 100644
index 00000000..bdc4ea85
--- /dev/null
+++ b/test/directive/styleSpec.js
@@ -0,0 +1,31 @@
+'use strict';
+
+describe('style', function() {
+  var element;
+
+
+  afterEach(function() {
+    dealoc(element);
+  });
+
+
+  it('should not compile style element', inject(function($compile, $rootScope) {
+    element = jqLite('<style type="text/css">should {{notBound}}</style>');
+    $compile(element)($rootScope);
+    $rootScope.$digest();
+
+    // read innerHTML and trim to pass on IE8
+    expect(trim(element[0].innerHTML)).toBe('should {{notBound}}');
+  }));
+
+
+  it('should compile content of element with style attr', inject(function($compile, $rootScope) {
+    element = jqLite('<div style="some">{{bind}}</div>');
+    $compile(element)($rootScope);
+    $rootScope.$apply(function() {
+      $rootScope.bind = 'value';
+    });
+
+    expect(element.text()).toBe('value');
+  }));
+});