myems/admin/views/settings/space/space.model.html

<div class="inmodal">
    <div class="modal-header">
        <h4 class="modal-title">{{operation | translate}}</h4>
    </div>
    <div class="modal-body">
        <form role="form" name="form_space" novalidate class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-4 control-label">{{'SETTING.NAME' | translate}}</label>
                <div class="col-sm-8">
                    <input ng-model="space.name" type="text" name="spacename" class="form-control" required>
                    <div class="m-t-xs" ng-show="form_space.spacename.$invalid && form_space.spacename.$dirty">
                        <small class="text-danger"
                            ng-show="form_space.spacename.$error.required">{{'SETTING.INPUT_NAME' | translate}}</small>
                    </div>
                </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label class="col-sm-4 control-label">{{'SPACE.AREA' | translate}}</label>
                <div class="col-sm-8">
                    <input ng-model="space.area" type="number" name="spacearea" class="form-control" required>
                    <div class="m-t-xs" ng-show="form_space.spacearea.$invalid && form_space.spacearea.$dirty">
                        <small class="text-danger"
                            ng-show="form_space.spacearea.$error.required">{{'SPACE.INPUT_AREA' | translate}}</small>
                        <small class="text-danger"
                            ng-show="form_space.spacearea.$error">{{'SETTING.INVALID_FORMAT' | translate}}</small>
                    </div>
                </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group"><label class="col-sm-4 control-label">{{'SETTING.CONTACT' | translate}} ({{'SETTING.OPTIONAL' | translate}})</label>
                <div class="col-sm-8">
                    <ui-select ng-model="space.contact.id" name="spacecontact" theme="bootstrap">
                        <ui-select-match allow-clear="true" placeholder="{{'COMMON.PLACEHOLDER' | translate}}">
                            {{$select.selected.name}}</ui-select-match>
                        <ui-select-choices repeat="contact.id as contact in contacts | filter: $select.search">
                            <div ng-bind-html="contact.name | highlight: $select.search"></div>
                            <small>{{contact.email}},{{contact.phone}}</small>
                        </ui-select-choices>
                    </ui-select>
                    <div class="m-t-xs" ng-show="form_space.spacecontact.$invalid && form_space.spacecontact.$dirty">
                        <small class="text-danger"
                            ng-show="form_space.spacecontact.$error.required">{{'SETTING.SELECT_CONTACT' | translate}}</small>
                    </div>
                </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group"><label class="col-sm-4 control-label">{{'SETTING.TIMEZONE' | translate}}</label>
                <div class="col-sm-8">
                    <ui-select ng-model="space.timezone.id" name="spacetimezone" theme="bootstrap" required>
                        <ui-select-match allow-clear="false" placeholder="{{'COMMON.PLACEHOLDER' | translate}}">
                            {{$select.selected.name}}</ui-select-match>
                        <ui-select-choices repeat="timezone.id as timezone in timezones | filter: $select.search">
                            <div ng-bind-html="timezone.name | highlight: $select.search"></div>
                            <small>{{timezone.description}}</small>
                        </ui-select-choices>
                    </ui-select>
                    <div class="m-t-xs" ng-show="form_space.spacetimezone.$invalid && form_space.spacetimezone.$dirty">
                        <small class="text-danger"
                            ng-show="form_space.spacetimezone.$error.required">{{'SETTING.SELECT_TIMEZONE' | translate}}</small>

                    </div>
                </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group"><label
                    class="col-sm-4 control-label">{{'SETTING.IS_INPUT_COUNTED' | translate}}</label>

                <div class="col-sm-8">
                    <div class="checkbox checkbox-success">
                        <input id="chk_space_isinputcounted" type="checkbox" ng-model="space.is_input_counted"
                            ng-checked="space.is_input_counted">
                        <label for="chk_space_isinputcounted">{{'SETTING.IS_INPUT_COUNTED' | translate}}</label>
                    </div>

                </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group"><label
                    class="col-sm-4 control-label">{{'SETTING.IS_OUTPUT_COUNTED' | translate}}</label>

                <div class="col-sm-8">
                    <div class="checkbox checkbox-success">
                        <input id="chk_space_isoutputcounted" type="checkbox" ng-model="space.is_output_counted"
                            ng-checked="space.is_output_counted">
                        <label for="chk_space_isoutputcounted">{{'SETTING.IS_OUTPUT_COUNTED' | translate}}</label>
                    </div>

                </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group"><label class="col-sm-4 control-label">{{'SETTING.COSTCENTER' | translate}}</label>
                <div class="col-sm-8">
                    <ui-select ng-model="space.cost_center.id" theme="bootstrap" required>
                        <ui-select-match allow-clear="flase" placeholder="{{'COMMON.PLACEHOLDER' | translate}}">
                            {{$select.selected.name}}</ui-select-match>
                        <ui-select-choices repeat="costcenter.id as costcenter in costcenters | filter: $select.search">
                            <div ng-bind-html="costcenter.name | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group"><label class="col-sm-4 control-label">{{'SPACE.DESCRIPTION' | translate}} ({{'SETTING.OPTIONAL' | translate}})</label>
                <div class="col-sm-8">
                    <input ng-model="space.description" type="text" name="spacedescription" class="form-control">
                    <div class="m-t-xs"
                        ng-show="form_space.spacedescription.$invalid && form_space.spacedescription.$dirty">
                        <small class="text-danger"
                            ng-show="form_space.spacedescription.$error.required">{{'SPACE.INPUT_DESCRIPTION' | translate}}</small>
                    </div>
                </div>
            </div>
            <div class="form-group"><label class="col-sm-4 control-label">{{'COMMON.QR_CODE' | translate}} </label>
             <div class="col-sm-8">
                  <div>
                       <qrcode data="{{space.qrcode}}" version="1" error-correction-level="L" size="100" color="#fff" background="#000" download></qrcode>
                  </div>
              </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-white" ng-click="cancel()">{{'SETTING.CANCEL' | translate}}</button>
        <button type="button" ng-disabled="form_space.$invalid" class="btn btn-primary"
            ng-click="ok()">{{'SETTING.SAVE' | translate}}</button>
    </div>
</div>