🧠 Understanding $scope and ng-model
Connect your HTML view and controller logic with powerful AngularJS features.
In AngularJS, $scope and ng-model are two essential tools that enable two-way data binding between your HTML and JavaScript logic.
📌 What is $scope?
- $scope is an object that refers to the application model (data).
- It acts as a bridge between the controller (logic) and the view (HTML).
- You define variables and functions on
$scopein your controller, and they become available in the HTML.
🔗 What is ng-model?
- ng-model binds the value of HTML controls (like input, textarea) to an AngularJS variable.
- It supports real-time two-way binding between the view and model.
🧪 Example
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.message = 'Hello Angular!';
});
</script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="message">
<p>Message: {{ message }}</p>
</body>
</html>
🔄 Two-Way Binding: When you change the input, the value in
$scope.message changes. When you update the variable in the controller, it reflects in the view. This is the power of AngularJS!
