Bindings

Bind to input, select or text with ng-model

The following example uses the ng-model-directive to bind content in a textbox to a paragraph:

Example

<div ng-app="">
    <span>Textbox: <input type="text" ng-model="myTextboxModel" /></span>
    <p>You entered: {{ myTextboxModel }} </p>
</div>

Play with example »

If you enter anything in the textbox, the value will be shown in the paragraph as well!

Set default variables with ng-init

With the ng-init-directive you can set default variables. The follwing example shows how to bind with such a variable:

Example

<div ng-app="" ng-init="userfirst='Ludwig';userlast='Van Beethoven'">
    <p>Glad you are here {{ userfirst + ' ' + userlast }}!</p>
</div>

Play with example »

Another way to bind is to use the ng-bind directive.

Example

<div ng-app="" ng-init="fullname='Ludwig Van Beethoven'">
    <p>Glad you are here <span ng-bind="fullname"></p>
</div>

Play with example »

Binding to objects

As you normally wont bind to default-variables but to objects instead, we’ll show you now how this works in the next example.

Example

<div ng-app="" ng-init="order={orderId:'1234',grandTotal:'444'}">
    <p>Your order {{ order.orderId }} has a grand total of {{ order.grandTotal }}$</p>
</div>

Play with example »