angular.js directive swallows events from transclude

Question

I've created a directive which creates a div-wrapper around some content using ngTransclude. See this very simple example: http://jsfiddle.net/DHzrr/1/

If you remove the group element from HTML

<div ng-controller="TodoCtrl">
  <form ng-submit="addTodo()">
    <input type="checkbox" ng-model="checked">
  </form>
  <div ng-hide="checked">NOT CHECKED</div>
</div>

the "ng-hide" listener is working. So my group-directive swallows the event emit or isolates the $scope. How can I make this work?

I thought a new scope is only created when using the scope:true attribute in the directive definition object.

Answer 1

transclude: true creates a new child scope that prototypically inherits from the parent (TodoCtrl) scope. You can solve the problem in one of three ways:

1. (recommended) bind to an object property defined on the parent scope: ng-model="obj.checked" and in your controller: $scope.obj = {checked: false}
   fiddle
2. use ng-model="$parent.checked"
3. use a function to update the model on the parent: add ng-change="toggle()" to your input, then define a function on your controller: $scope.toggle = function() { $scope.checked = !$scope.checked }

See also What are the nuances of scope prototypal / prototypical inheritance in AngularJS?, section directives item "4. transclude: true"