ng-bind has one-way data binding ($scope --> view). It has a shortcut {{ val }} which displays the scope value $scope.val inserted into html where val is a variable name.
ng-model is intended to be put inside of form elements and has two-way data binding ($scope --> view and view --> $scope) e.g. <input ng-model="val"/>.
AngularJS provides $on, $emit, and $broadcast services for event-based communication between controllers.
The key thing to remember when using $scope to fire your events, is that they will communicate only with immediate parent or child scopes only! Scopes aren’t always child and parent. We might have sibling scopes. Using $scope to fire an event will miss out sibling scopes, and just carry on up! They do not go sideways!
So to solve this problem we can use $broadcast and $emit.
We could fire an event down from ParentCtrl to SiblingOneCtrl using $broadcast:
If we wanted to communicate upwards, from SiblingOneCtrl to ParentCtrl, you guessed it, we can use $emit.
AngularJS is a JavaScript framework which simplifies binding JavaScript objects with HTML UI elements.
Let us understand this with a simple Example.
So if we analyze the above code (Control Binding In Plain Javascript) visually it looks something as shown below.
And if we analyze the code (Control Binding In Angular1) visually it looks something as shown below.
In Angular 2, Components are the main way we build and specify elements and logic on the page.
In Angular 1, we achieved this through directives, controllers, and scope. In Angular 2, all those concepts are combined into Components.
To build an Angular 2 application you define a set of components, for every UI element, screen, and route. An application will always have a root component that contains all other components. In other words, every Angular 2 application will have a component tree, which may look like this:
