Question

When using server-side templating and client-side angularjs, I’m not able to get angularjs to recognize values I’ve templated in on the server.

For example (or on jsfiddle):

<div ng-app>
<div ng-controller="Ctrl">
    <textarea ng-model="data" placeholder="Enter a name here">Templated in</textarea>
    {{data}}
</div>
</div>

Angularjs will always replace the value in the text area with the value of $scope.data (which is null). What I want is for the value of $scope.data to take on “Templated in”, on app bootstrap, then to continue normally from there.

How can I template in from the server a value, then have angularjs model bind that value once on the client?

Answer 1

Use ng-init

<textarea ng-model="data" placeholder="Enter a name here"
 ng-init="data='Templated in'"></textarea>

See also AngularJS – Value attribute on an input text box is ignored when there is a ng-model used? and
rails + angularjs loading values into textfields on edit