I am trying to bind a checkbox to scope using ng-model. The checkbox's initial state corresponds to the scope model just fine, but when I check/uncheck the checkbox, the model does not change. Some things to note is that the template is dynamically loaded at runtime using ng-include
app.controller "OrdersController", ($scope, $http, $location, $state, $stateParams, Order) -> $scope.billing_is_shipping = false $scope.bind_billing_to_shipping = -> console.log $scope.billing_is_shipping <input type="checkbox" ng-model="billing_is_shipping"/>
When I check the box the console logs false, when I uncheck the box, the console again logs false. I also have an order model on the scope, and if I change the checkbox's model to be order.billing_is_shipping, it works fine
I struggled with this problem for a while. What worked was to bind the input to an object instead of a primitive.
<!-- Partial --> <input type="checkbox" ng-model="someObject.someProperty"> Check Me! // Controller $scope.someObject.someProperty = false
If the template is loaded using ng-include
, you need to use $parent
to access the model defined in the parent scope since ng-include
if you want to update by clicking on the checkbox.
<div ng-app ng-controller="Ctrl"> <div ng-include src="'template.html'"></div> </div> <script type="text/ng-template" id="template.html"> <input type="checkbox" ng-model="$parent.billing_is_shipping" ng-change="checked()"/> </script> function Ctrl($scope) { $scope.billing_is_shipping = true; $scope.checked = function(){ console.log($scope.billing_is_shipping); } }
DEMO
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With