Angular 4 - ngModel for select and select multiple checkboxes

In application there are 4 checkboxes. When i select one box all gets selected and when i deselct any one all gets deselcted. I want the top box to control all boxes below like if i check top box as select then all should select. if i unselect top all should get unselected. and below one's should be independent of each other. If i select all down boxes then main top box one should also get selected.

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {FormsModule} from '@angular/forms'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
  <input type="checkbox" [(ngModel)]="theCheckbox"  data-md-icheck (change)="toggleVisibility($event)"/><br>
  <input type="checkbox"  [(ngModel)]="theCheckbox" /><br>
  <input type="checkbox" [(ngModel)]="theCheckbox" /><br>
  <input type="checkbox" [(ngModel)]="theCheckbox" /><br>
  Checkbox is <span *ngIf="marked">checked</span><span *ngIf="!marked">unchecked</span>

  <div>And <b>ngModel</b> also works, it's value is <b></b></div>

  `,
  directives: []
})
export class App {
  marked = false;
  theCheckbox = false;
  constructor() {

  }

  toggleVisibility(){
    this.marked= e.target.checked;
  }
}

@NgModule({
  imports: [ BrowserModule , FormsModule],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}