Angular changing parent model from transclude scope

Question

I'm confused from angular transclude scope. I'm trying to make let say collapsible directive. But binding inside the transclude scope will not change model of parent unless I use some object for the model eg. 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>

I already read this topic and still I don't get it why I must use prefix to the model. Confused about Angularjs transcluded and isolate scopes & bindings

Working example at http://plnkr.co/edit/z3IvR1a37jdNRCJWG0Yq?p=preview

In my app I'm using object for forms, so it works fine but I just want to know why is that.

Answer 1

When you use an object to bind to the model, your object is passed to the different scope as an reference, not a copy, in Javascript objects are passed to functions as a reference. In that case it will still reference to previous scope.