I am currently utilizing the modal feature from Bootstrap 3's Angular fork, and I am facing an issue with using a checkbox within the modal and retrieving its value in my main controller.
The checkbox value is properly bound in the view but not in the modal's controller. You can see an example of the problem here: Plunker
Here is the code for the modal controller:
var ModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.checked = false;
$scope.ok = function () {
$modalInstance.close($scope.checked);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
When calling $scope.checked in the ok function, it does not contain the correct value...
And here is the code for the view:
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<label>
<input type="checkbox" ng-model="checked"> test
</label><br/>
Checked: {{checked}}
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
Any suggestions on how to resolve this issue would be greatly appreciated.
Thank you in advance!