fix(timepicker): account for CD before model write (meridian case)

Fixes #1696

Closes #1699

src/timepicker/timepicker.spec.ts

@@ -780,6 +780,38 @@ describe('ngb-timepicker', () => {
              });
        }));
 
+    it('should work with template-driven form validation when meridian is true', async(() => {
+         const html = `
+          <form>
+            <ngb-timepicker [(ngModel)]="model" name="control"></ngb-timepicker>
+          </form>`;
+
+         const fixture = createTestComponent(html);
+         const compiled = fixture.nativeElement;
+         fixture.detectChanges();
+         fixture.whenStable()
+             .then(() => {
+               fixture.detectChanges();
+               return fixture.whenStable();
+             })
+             .then(() => {
+               expect(getTimepicker(compiled)).toHaveCssClass('ng-valid');
+               expect(getTimepicker(compiled)).not.toHaveCssClass('ng-invalid');
+
+               fixture.componentInstance.model = {hour: 11, minute: 0, second: 0};
+               fixture.detectChanges();
+               return fixture.whenStable();
+             })
+             .then(() => {
+               fixture.detectChanges();
+               return fixture.whenStable();
+             })
+             .then(() => {
+               expect(getTimepicker(compiled)).toHaveCssClass('ng-valid');
+               expect(getTimepicker(compiled)).not.toHaveCssClass('ng-invalid');
+             });
+       }));
+
     it('should work with model-driven form validation', async(() => {
          const html = `
           <form [formGroup]="form">

src/timepicker/timepicker.ts

@@ -126,7 +126,7 @@ const NGB_TIMEPICKER_VALUE_ACCESSOR = {
         <div *ngIf="meridian" class="ngb-tp-meridian">
           <button type="button" class="btn btn-outline-primary" [ngClass]="setButtonSize()"
             [disabled]="disabled" [class.disabled]="disabled"
-            (click)="toggleMeridian()">{{model.hour >= 12 ? 'PM' : 'AM'}}</button>
+            (click)="toggleMeridian()">{{model?.hour >= 12 ? 'PM' : 'AM'}}</button>
         </div>
       </div>
     </fieldset>