Checkbox not bound to scope in angularjs

Question

I am trying to snap a flag to scope using ng-model. The initial state of the checkbox corresponds to the region model is just fine, but when I check / uncheck the box, the model does not change. It should be noted 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 logs false again. I also have an order model in the area, and if I change the check box model to be order.billing_is_shipping, it works fine

Answer 1

I struggled with this problem for a while. What was connected with binding the input to the object instead of the primitive.

 <!-- Partial --> <input type="checkbox" ng-model="someObject.someProperty"> Check Me! // Controller $scope.someObject.someProperty = false 

Answer 2

If the template is loaded using ng-include , you need to use $parent to access the model defined in the parent area, starting with ng-include , if you want to update it by clicking on it.

 <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

Answer 3

Turning around to Matt's answer , see this Egghead.io video that addresses this same issue and explains: Why binding properties directly to $ scope can cause problems

see https://groups.google.com/forum/#!topic/angular/7Nd_me5YrHU

This is usually due to a different directive between your ng controller and your input creating a new scope. When you record a selection, enter its value, it will write it to the very last area, so it will write it to this scope, not the parent, far away.

The best practice is never to bind directly to a variable in an area in ng-model , this is also known, as always, by including a “dot” in your ngmodel.

Answer 4

In my directive (in the link function), I created a variable for the scope variable as follows:

 link: function(scope, element, attrs) { "use strict"; scope.success = false; 

And in the area template, an input tag is included, for example:

 <input type="checkbox" ng-model="success"> 

This did not work.

In the end, I changed my scope variable as follows:

 link: function(scope, element, attrs) { "use strict"; scope.outcome = { success : false }; 

And my input tag is as follows:

 <input type="checkbox" ng-model="outcome.success"> 

Now it works as expected. I knew this explanation, but I forgot, maybe someone will fill it out for me. :)