How to bind variables in Angular JS using ng-bind?

You can use the ng-bind directive, which will bind the innerHTML of the element to the specified model property:

Method 1

	<p ng-bind="demo_var"></p>

Method 2

	<p>First name: {{firstname}}</p>

Complete Example

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
    <p ng-bind="firstName"></p>
    <p>{{ lastName }}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "Coderz";
    $scope.lastName = "Heaven";    
});
</script>

<p>Use the ng-bind directive to bind the innerHTML of an element to a property in the data model.</p>

</body>
</html>

Leave a Reply Cancel reply