AngularJS is a JavaScript MVC framework developed by Google

Angular's unique and innovative features are

two-way data bindings,

dependency injection,

easy-to-test code

and extending the HTML dialect by using directives.

Data-binding in Angular apps is the automatic synchronization of data between the model and view
components. The way that Angular implements data-binding lets you treat the model as the single-
source-of-truth in your application. The view is a projection of the model at all times. When the
model changes, the view reflects the change, and vice versa.

Data Binding inOther Template Systems

Most templating systems bind data in only one direction: they merge template and model
components together into a view. After the merge occurs, changes to the model or related sections
of the view are NOT automatically reflected in the view. Worse, any changes that the user makes to
the view are not reflected in the model. This means that the developer has to write code that
constantly syncs the view with the model and the model with the view.
Data Binding in Angular Templates

Angular templates work differently. First the template (which is the uncompiled HTML along
with any additional markup or directives) is compiled on the browser. The compilation step
produces a live view. Any changes to the view are immediately reflected in the model, and
any changes in the model are propagated to the view. The model is the single-source-of-truth
for the application state, greatly simplifying the programming model for the developer. You
can think of the view as simply an instant projection of your model.

Because the view is just a projection of the model, the controller is completely separated
from the view and unaware of it. This makes testing a snap because it is easy to test your
controller in isolation without the view and the related DOM/browser dependency.
<span>{{model.code}} - {{model.name}}</span>

<span ng-if="model.code == ''">-</span>

<span>{{GetFullNameContries(model.country)}}</span>

$scope.GetLanguagesLevels = function(langAbr){}

<ul>
<li ng-repeat="framework in frameworks"
title="{{framework.description}}">
{{framework.name}}
</li>
</ul>

$scope.redirectToDetails=function()
{
console.log($scope.organizationId);
console.log($scope.selectedYear);
console.log($scope.organizationCode);
if($scope.organizationId && $scope.selectedYear)
{
window.location.href="#/statistics/"+$scope.organizationId+"/" +
$scope.organizationCode +"/"+$scope.selectedYear;
}

ng-change="redirectToDetails()

ng-model="selectedYear"

$scope.selectedYear
MVC

 Model - It is the lowest level of the pattern responsible for maintaining data.
 The model is responsible for managing application data. It responds to the request
from view and to the instructions from controller to update itself.

 View - It is responsible for displaying all or a portion of the data to the user.

A presentation of data in a particular format, triggered by the controller's decision to present

the data.

 Controller - It is a software Code that controls the interactions between the Model
and View.
 The controller receives input, validates it, and then performs business operations that
modify the state of the data model.

MVC is popular because it isolates the application logic from the user interface layer and
supports separation of concerns. The controller receives all requests for the application and
then works with the model to prepare any data needed by the view. The view then uses the
data prepared by the controller to generate a final presentable response.
function MyController($scope) {
$scope.username = 'World';

This is a function you have defined in a controller which you can access in
view by following code
$scope.sayHello = function() {
$scope.greeting = 'Hello ' + $scope.username + '!';
};
<div ng-controller=” MyController”>

Your name:

<input type="text" ng-model="username">

<button ng-click='sayHello()'>greet</button>
<hr>
{{greeting}}

<h1>{{data.username}}</h1>

<h1>{{data.greeting}}</h1>

</div>

This will automatically pick up the value from controller and display it on screen.

Scope :

Scope is the glue between application controller and the view.

Scope is an object that refers to the application model. It is an execution context for
expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of
the application. Scopes can watch expressions and propagate events.