Angular-Formly: Modal button is not working onChange event - angularjs

Question

I'm trying to popup a modal on onChange event of a formly custom checkbox. Modal turnup okay, but can't make the buttons working :(. Where I'm doing wrong?
{
key: 'coordinatesToLocateSite',
className: 'col-sm-8 col-md-8 col-lg-8',
type: 'custom_checkbox',
templateOptions: {
label: 'Use coordinates to locate site',
onChange: function($viewValue, $modelValue, scope) {
if ($viewValue === true) {
scope.modalInstance = scope.$uibModal.open({
animation: true,
templateUrl: 'address_replace_coordinates_check.html'
})
}
function check() {
if (scope.modalInstance) {
scope.modalInstance.close();
}
}
scope.uncheck = function uncheck(keyName) {
$scope.model[keyName] = !$scope.model[keyName];
if (scope.modalInstance) {
scope.modalInstance.close();
}
}
}
},
expressionProperties: {
'templateOptions.disabled': 'formState.disabled'
}
}
In the template my button are as follows,
<div class="modal-footer">
<button class="btn btn-warning" type="button" ng-click="check()">Ok</button>
<button class="btn btn-primary" type="button" ng-click="uncheck('coordinatesToLocateSite')">Cancel</button>
</div>
And lastly, I've tried the following as well.
formlyConfigProvider.setType({
name: 'custom_checkbox',
templateUrl: 'bcsa_checkbox.html',
wrapper: ['bootstrapHasError'],
apiCheck: function apiCheck(check) {
return {
templateOptions: {
onChange: check.oneOfType([check.string, check.func]),
label: check.string
}
};
},
controller: /* #ngInject */ function($scope, $sce, $uibModal) {
'ngInject';
$scope.$uibModal = $uibModal;
var markerOfRequired = '<span class="red"> \n<strong> \n* \n</strong> \n</span>';
$scope.labelDisplay = $sce.trustAsHtml($scope.to.label + ($scope.to.required ? markerOfRequired : ''));
$scope.onChange = onChange;
$scope.check = check;
$scope.uncheck = uncheck;
function onChange($event) {
if (angular.isString($scope.to.onChange)) {
return $scope.$eval($scope.to.onChange, { $event: $event, $scope: $scope });
} else {
return $scope.to.onChange($event, $scope);
}
}
function check() {
if (scope.modalInstance) {
scope.modalInstance.close();
}
}
function uncheck(keyName) {
$scope.model[keyName] = !$scope.model[keyName];
if (scope.modalInstance) {
scope.modalInstance.close();
}
}
}
});

Answer 1

i couldn't make a fiddle to test on but reading your code i see you'r not calling the functions correctly, the ng-click should access an object defined inside the $scope
so try changing the functions declarations to this
$scope.onChange = function ($event) {
if (angular.isString($scope.to.onChange)) {
return $scope.$eval($scope.to.onChange, { $event: $event, $scope: $scope });
} else {
return $scope.to.onChange($event, $scope);
}
}
$scope.check = function () {
if (scope.modalInstance) {
scope.modalInstance.close();
}
}
$scope.uncheck = function (keyName) {
$scope.model[keyName] = !$scope.model[keyName];
if (scope.modalInstance) {
scope.modalInstance.close();
}
}

Answer 2

I figure it out, when we open the $uibModal we should pass the scope along with that. So, I've modified some codes.
scope.modalInstance = scope.$uibModal.open({
animation: true,
backdrop: false,
keyboard: false,
scope: scope,
templateUrl: 'address_replace_coordinates_check.html'
})
In the controller, instead of accessing scope I've accessed its $parent.
$scope.check = check;
$scope.uncheck = uncheck;
function check() {
let modalInstance = this.$parent.modalInstance;
if (modalInstance) {
modalInstance.close();
}
}
function uncheck(keyName) {
let scope = this.$parent;
let modalInstance = scope.modalInstance;
scope.model[keyName] = !scope.model[keyName];
if (modalInstance) {
modalInstance.close();
}
}