Data Binding using Angular Expression in Html

Let's learn data binding with angular expression in Html code. there are some certain way writing expression in Angular Js, so that Angular can resolve the expression and return the result.

In AngularJS any expressions can be written inside double braces like {{ expression }} .
In model data binding we often write expressions with ng-bind attrbute like ng-bind="expression"

Data Binding angular expressions can easily be mixed with html code just like we used to write JavaScript expressions in html element, only thing you need to remember that any expression has to be under ng-app="", otherwise expression will not be able to evaluate the value

Angular Expressions in HTML Code

For example
If you try to write an expression outside the ng-app directive, that will be considered as plain HTML, without evaluating the expression

<script src="angular.min.js"> </script>
<div>
<p>Calculated amount is {{ 10 * 90 }} </p>
</div>

The result of above expression would be

Now if you write same expression under a ng-app directive, you will see the evaluated result

<div ng-app="" ng-init="quantity=10;unitpice=90">
   Calculated amount is {{ 10 * 90 }}
  Or <span ng-bind="quantity * unitpice"> </span>
 </div>

Here is the result of angular expression in html code.

Note in above example, during initialization we have declared two variables and assign them some value and inside the expression we have calculated the value in two different ways,
1) using ng-bind and 2) using {{ }}

You may be interested in following posts

• How to use Angular Directives in html page
• Angular filter service
• angular form validation example