Angular : uncheck indeterminate checkbox not working

I have very simple requirement. Lets say checkbox has three states, indeterminate, checked & unchecked. What I want :

• When click on indeterminate checkbox it should uncheck
• When click on checked checkbox it should uncheck
• When click on unchecked checkbox it should checked

But in angular2 I am not able to get solve first requirement. Whatever I do, when click on indeterminate checkbox it get checked (Not expected).

Please check stackbliz

export class AppComponent {
  name = 'Angular';
  milestone = { status: "crossed" };
  checkMilestone(milestone) {
    switch (milestone.status) {
      case "crossed": {
        milestone.status = "unchecked";
        break;
      }
      case "unchecked": {
        milestone.status = "checked";
        break;
      }
      case "checked": {
        milestone.status = "unchecked";
        break;
      }
    }
  }
}

HTML

<input type="checkbox" [indeterminate]="milestone?.status === 'crossed'" [checked]="milestone?.status === 'checked'" (change)="checkMilestone(milestone)"> Status:  

I want to implement parent child checkbox and select all functionality similar to this fiddle but in angular.