If you click on the label of the radio button two models will open. If you click on the button, only one will open. You also get this console error when you open the modal: ExpressionChangedAfterItHasBeenCheckedError

<form #checkForm="ngForm">
  <div>
    <div>
      <sky-radio name="radiotest" [(ngModel)]="selectedValue" #cb="ngModel" value="1">
        <sky-radio-label>No Modal</sky-radio-label>
      </sky-radio>
    </div>

    <div>
      <sky-radio name="radiotest" [ngModel]="selectedValue" (ngModelChange)="selectedValue = $event" value="2"  (click)="openModal()">
        <sky-radio-label>Open Modal</sky-radio-label>
      </sky-radio>
    </div>
  </div>
</form>

import { Component } from '@angular/core';

import { SkyModalService, SkyModalCloseArgs } from '@blackbaud/skyux/dist/core';

import { SkyModalDemoContext } from './modal-demo-context';
import { SkyModalDemoFormComponent } from './modal-demo-form.component';

@Component({
  selector: 'sky-modal-demo',
  templateUrl: './modal-demo.component.html'
})
export class SkyModalDemoComponent {
  public selectedValue = '1';
  constructor(private modal: SkyModalService) { }

  public openModal(type: string) {
    console.log('We are opening the modal');
    let context = new SkyModalDemoContext();

    let options: any = {
      providers: [{ provide: SkyModalDemoContext, useValue: context }]
    };
    let modalInstance = this.modal.open(SkyModalDemoFormComponent, options);

    modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {
      console.log('Modal closed with reason: ' + result.reason + ' and data: ' + result.data);
    });
  }
}

<sky-modal>
  <sky-modal-header>
    {{title}}
  </sky-modal-header>
  <sky-modal-content>
    <div id="docs-modal-content">
      This modal can have content!
    </div>
  </sky-modal-content>
  <sky-modal-footer>
    <button type="button" class="sky-btn sky-btn-primary" (click)="instance.save('Something cool')">
      Close
    </button>
  </sky-modal-footer>
</sky-modal>

import { Component } from '@angular/core';

import { SkyModalInstance } from '@blackbaud/skyux/dist/core';

import { SkyModalDemoContext } from './modal-demo-context';

@Component({
  selector: 'sky-demo-modal-form',
  templateUrl: './modal-demo-form.component.html'
})
export class SkyModalDemoFormComponent {
  public title = 'Hello world';

  constructor(public context: SkyModalDemoContext, public instance: SkyModalInstance) { }
}

export class SkyModalDemoContext {
}

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {

    'app': '.',

    '@angular/core': 'npm:@angular/core@4.2.5/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common@4.2.5/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler@4.2.5/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser@4.2.5/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@4.2.5/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http@4.2.5/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router@4.2.5/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms@4.2.5/bundles/forms.umd.js',
    '@angular/animations': 'npm:@angular/animations@4.2.5/bundles/animations.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser@4.2.5/bundles/platform-browser-animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations@4.2.5/bundles/animations-browser.umd.js',
    'tslib': 'npm:tslib@1.6.1',

    'rxjs': 'npm:rxjs',
    'typescript': 'npm:typescript@2.2.1/lib/typescript.js',
    '@blackbaud/skyux/dist/core': 'npm:@blackbaud/skyux/dist/bundles/core.umd.js',

    'moment': 'npm:moment/moment.js',

    'microedge-rxstate/dist': 'npm:microedge-rxstate/dist/index.js',

    //dragula packages
    'ng2-dragula/ng2-dragula': 'npm:ng2-dragula',
    'dragula': 'npm:dragula',
    'contra': 'npm:contra',
    'atoa': 'npm:atoa',
    'ticky': 'npm:ticky',
    'crossvent': 'npm:crossvent/src',
    'custom-event': 'npm:custom-event'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    },
    '@blackbaud/skyux/dist/core': {
       format: 'cjs'
     },
    'ng2-dragula/ng2-dragula': {
      main: 'ng2-dragula.js',
      defaultExtension: 'js'

    },
    'dragula': { main: 'dragula.js', defaultExtension: 'js' },
    'contra': { main: 'contra.js', defaultExtension: 'js' },
    'atoa': { main: 'atoa.js', defaultExtension: 'js' },
    'ticky': { main: 'ticky.js', defaultExtension: 'js' },
    'crossvent': { main: 'crossvent.js', defaultExtension: 'js' },
    'custom-event': { main: 'index.js', defaultExtension: 'js' },
  }
});

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>SKY UX 2 Demo</title>
    <link rel="stylesheet" href="https://unpkg.com/@blackbaud/skyux/dist/css/sky.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.8.10/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <sky-demo-app>
      loading...
    </sky-demo-app>
  </body>

</html>

/* Styles go here */

import { Component } from '@angular/core';

@Component({
  selector: 'sky-demo-app',
  template: '<sky-modal-demo></sky-modal-demo>'
})
export class AppComponent() { }


import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { SkyModule } from '@blackbaud/skyux/dist/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { SkyModalDemoComponent } from './modal-demo.component.ts';
import { SkyModalDemoFormComponent } from './modal-demo-form.component.ts';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    SkyModule
  ],
  declarations: [
    AppComponent,
    SkyModalDemoComponent,
SkyModalDemoFormComponent
  ],
  entryComponents: [
    SkyModalDemoFormComponent
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);