How to use AngularJS Data Binding

AngularJS Data Binding

AngularJS provides way to bind the model to view and visa verse. It works like bridge between the model and the view.

It support two-way binding means if data changes in model, the data on the view also reflects with the changes, Also if data in the view changes, the model data will updated immediately and automatically .

ng-bind directive  will use to bind the innerHTML of the element to the model property

<div ng-app="myApp" ng-controller="EmployeeController">

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

</div>

Also can use double braces {{ }} to display data from the model

<div ng-app="myApp" ng-controller="EmployeeController">

    <p>{{WebsiteName}}</p>

</div>

As we know AngularJS support two-way binding the model to view.  ng-model directive can use for two-way binding to bind the model to the view.

<div ng-app="myApp" ng-controller="EmployeeController">

    Name: <input type="text" ng-model="WebsiteName" />

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

    <p>{{WebsiteName}}</p>

</div>

<script>

    var myapp = angular.module('myApp', []);

    myapp.controller('EmployeeController', function ($scope) {

        $scope.WebsiteName = "www.code-view.com";       

    });

</script>