I am puzzled by the concept of Angular transclude scope. I am attempting to create a collapsible directive, but it seems that binding inside the transclude scope does not affect the model of the parent unless I utilize an object like 'data'.
<div>
data.prop: {{data.prop}} <br>
prop: {{prop}}
<collapsible>
data.prop: <input type="text" ng-model="data.prop" /> <br> // WILL CHANGE PARENT
prop: <input type="text" ng-model="prop" /> // WONT CHANGE PARENT
</collapsible>
</div>
Even after reading on this topic, I still find it confusing why a prefix is necessary for the model. Confused about Angularjs transcluded and isolate scopes & bindings
You can view a working example at http://plnkr.co/edit/z3IvR1a37jdNRCJWG0Yq?p=preview
In my application, I use an object for forms which works well, but I am curious as to why this is necessary.