Repository: angular
Issue: NgModel defers writeValue call to the next tick. Conflicts with OnInit's contract of child components.
Labels: type: bug/fix,freq1: low,area: core,core: change detection,P3

<!--
IF YOU DON'T FILL OUT THE FOLLOWING INFORMATION WE MIGHT CLOSE YOUR ISSUE WITHOUT INVESTIGATING
-->

**I'm submitting a ...**  (check one with "x")
```
[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
```

**Current behavior**
<!-- Describe how the bug manifests. -->
[NgModel](https://github.com/angular/angular/blob/master/modules/@angular/forms/src/directives/ng_model.ts) defers calling writeValue of the ControlValueAccessor with the supplied value to the next tick.

```typescript
private _updateValue(value: any): void {
    resolvedPromise.then(
        () => { this.control.setValue(value, {emitViewToModelChange: false}); });
}
```

While [OnInit's documentation](https://angular.io/docs/ts/latest/api/core/index/OnInit-class.html) states

> Lifecycle hook that is called after data-bound properties of a directive are initialized.

As a result of the two things described above, it is not obvious, how to from a component implementing `ControlValueAccessor` supply values to inner components that expect their data-bound properties to be initialized in `onInit`.

**Expected behavior**
<!-- Describe what the behavior would be without the bug. -->
- Add a warning to [OnInit's documentation](https://angular.io/docs/ts/latest/api/core/index/OnInit-class.html) or NgModel's documentation?
- Or change `ngModel`'s behavior?

**Minimal reproduction of the problem with instructions**
<!--
If the current behavior is a bug or you can illustrate your feature request better with an example, 
please provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem via
https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).
-->

[The minimal plunker to reproduce](http://plnkr.co/edit/gcu2lhPUj5gQYIbkpM5Q?p=preview)

**What is the motivation / use case for changing the behavior?**
<!-- Describe the motivation or the concrete use case -->
I am trying to place a color picker on a form. To do this I created a wrapper component that implements `ControlValueAccessor` which uses [angular2-color-picker](https://github.com/Alberplz/angular2-color-picker) underneath. 
The wrapper's `_value`  is set in `writeValue` and the wrapper is bound using `ngModel`. The wrapper, in turn, has the following in its markup:
```html
<input
    class="form-control"
    [colorPicker]="_value"
    (colorPickerChange)="onColorPickerChange($event)"
    ...
    />
```

The problem is `angular2-color-picker` tries to access its data-bound inputs in `onInit` which triggers a bug down the road.
`color-picker.directive.ts`
```typescript
export class ColorPickerDirective implements OnInit, OnChanges {
    @Input('colorPicker') colorPicker: string;
    @Output('colorPickerChange') colorPickerChange = new EventEmitter<string>(true);

    // ...

    ngOnInit() {
        let hsva = this.service.stringToHsva(this.colorPicker);
        // ...
        this.colorPickerChange.emit(this.service.outputFormat(hsva, this.cpOutputFormat, this.cpAlphaChannel === 'hex8'));
    }
```

**Please tell us about your environment:**
<!-- Operating system, IDE, package manager, HTTP server, ... -->

- Windows  10.
- WebStorm and VSCode.
- npm and yarn.

**Angular version:** 2.3.0
<!-- Check whether this is still an issue in the most recent Angular version -->

**Browser:** all
 
**Language:** TypeScript