Ng-model Inside Ng-transclude

I have an issue when using ng-model inside ng-transclude. As ng-transclude creates child scopes the value can't be set to the outer scope anymore. Without ng-transclude everything

Solution 1:

as the $parent may refer to a different scope, depending on the context, it is advisable that you declare an object to hold properties you intend to write into (e.g. $scope.data = {text: "foo"}; ) , so that when the ng-model is trying to write the value (via ng-model="data.text"), it will have to make a "read" first, looking along the prototype chain, until it finally reaches the "data" property on the desired scope (assuming there is no other scope that has that property along the way).

This approach follows the "always use the dot in ng-model" rule.

(side note: another possible approach is to use an alias for the controller, assuming it is available in the angular version you are using).

<divng-controller="ExampleController">
    {{my.text}}
    <pane><textareang-model="my.text"></textarea></pane></div>

http://plnkr.co/edit/aESrHtuSH9cd9ljyQAfH?p=preview