In this example the "name" is the model name and is bound to the textbox and span as ng-model="name". so that means as you type in the textbox, the same textbox text will be updated in the span element. By default, the value of name model is "Example" which is added like
$scope.name = 'Example' Let's see the example:
Let us understand "ng-bind" with the example of addition of two numbers, In this example, We are taking two variables val1 and val2 and assigning them 5 and 3 as
$scope.val1 = 5; $scope.val2 = 3; We want to show addition of these numbers in span tag and here is how we use "Ng-bind" ng-bind="val1+val2"
Lets try to understand Ng-bind with dynamic calculation, so we are going to add two number which will be input by user, taking two textbox and assigning them
ng-model="val2" and the default value of val1 and val2 is 0 as
$scope.val1 = 0; $scope.val2 = 0; Also created one function "sum" which will be called on-change of textboxes so once user type in textbox sum, fuction gets called which will add the val1 and val2 and store in the $scope.result variable and this variable is bind with the span below the textboxes.
In this example
user.firstName is bind with the first textbox and
user.lastName is bind with the second textbox. These variables are also bind with the span tag for print the full name. As you type in the firstname and lastname textbox the full user name will show in the span below.
We have an array named flowersArray as
$scope.flowersArray = ["Rose", "Sun Flower", "Merry Gold", "Lily", "Bluebell", "Bergamot", "Bellflower", "Begonia", "Aster"] and with the help of ng-repeat directive we bind this array to the span element which display the list of the flower names given in array. The output will be as: Sun Flower Merry Gold Lily Bluebell Bergamot Bellflower Begonia Aster
We have an array with some random numbers and with the help of ng-repeat directive we bind these numbers to the span element to display the list of the numbers.
We have an array with some random numbers and we bind the 6th element like
ng-bind="Array" of the array i.e 600 to the span element, Thus the output is 600.
In this example, we have an array named flowersArray with the names of flowers. We bind the 7th element
ng-bind="flowersArray" to the span tag and in the array element on the 7th position will be bind with this span tag.
In this example, we have an array named flowersArray with the flower name and price. We print the array of flowers using ng-repeat directive in the table form and bind the flower name and flower price with the td tag of table.
In this example we have an array of cities with thier name and code, we bind the cities array with the select list using the ng-options directive and as the user select any option from the select list the code of the city display below the select list as we bind the selected value with the span below it.