Here you learn what model in angular js, how to define model within script, how angular model data binding done with html elements etc.
First we need to understand what is data model in Angular.js, then how to bind that data with html element.
The data model is the collection of data available for the application, let's look at the example below.
<script> var _module = angular.module('wtrModule', []); _module.controller('wtrCtrl', function ($scope) { $scope.studentName = "Arijit Bramhachari"; $scope.studentAddress = "S. V. Road, Malad West, Mumbai"; }); </script>
var _module = angular.module('wtrModule', []);
_module.controller('wtrCtrl', function ($scope) { $scope.studentName = "Arijit Bramhachari"; $scope.studentAddress = "S. V. Road, Malad West, Mumbai"; });
In AngularJS we can bind data in two different ways, ng-bind is the attribute used for databinding
Approach 1: using ng-bind attribute
<div ng-app="wtrModule" ng-controller="wtrCtrl"> <p ng-bind="studentName"> </p> </div>
Approach 2: using {{ propertyName }}
<div ng-app="wtrModule" ng-controller="wtrCtrl"> <p>{{studentName}} at {{studentAddress}} </p> </div>
Now here you can see the result of angular data binding using above two techniques
{{studentName}} at {{studentAddress}}
Hope you understood model data binding in angular js