<div class="modal-header">
    <button type="button" class="close closebtn" data-ng-click="cancel()" aria-hidden="true">&times;</button>
    <h1 class="modal-title">{{'Noticeboard Channel' | translate}}: {{wizdomChannel.name}}</h1>
</div>
<div class="modal-body">
    <form>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label for="channel"><strong>{{"Reach Channel" | translate}}</strong></label>
                        <select class="form-control"
                                name="channel"
                                ng-model="channelToMap"
                                ng-options="option.name for option in channels track by option.id">
                            <option value="" disabled selected>{{"Select a Channel" | translate}}</option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="form-group">
                        <label for="channel"><strong>{{"Reach Group" | translate}}</strong></label>
                        <select class="form-control"
                                ng-disabled="!channelToMap"
                                ng-model="groupToMap"
                                ng-options="option.name for option in groups track by option.id">
                            <option value="" disabled selected>{{"Select a Group" | translate}}</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default wiz-btn-padding" ng-click="cancel()">{{'Cancel' | translate}}</button>
    <button type="button" class="btn btn-primary wiz-btn-padding" ng-disabled="!channelToMap || !groupToMap" ng-click="save()">{{'Save' | translate}}</button>
</div>