1. ng-controller

   ng-controller directive declares the controller to be used with in its DOM.

   <div ng-controller="myController">
   ::::
   </div>

   Here myController represents a javascript function. A controller can be defined in several ways. The easiest way is to create a JavaScript function and include the scipt in your Html page.

   function myController($scope){
   ::
   ::
   }

   When angular finds a ng-controller directive, it creates a controller instance and injects required services. Among these services $scope is most important. A page can contain several Controllers, even controllers can be nested.

2. $scope

   $scope is the data model that binds view and controller. $scope defines the executionContext for the DOM elements with in specific ng-controller directive.All of the properties and methods are defined in $scope context.$scope has two primary apis ($watch and $apply) that helps in data-binding. $watch observes the changes in model and triggers a change notification when any model is changed. $apply will apply these changes and updates the view.
   Whenever angular compiles the view template, it finds the ng-model directive and sets a $watch expression on these property. When angular finds an expression {{..}} it executes in $scope context. By default when we declare ng-app directive, it creates a $rootScope.

   
   

   Here we have defined name variable in $scope context and email variable in $rootScope. $rootScope is available anywhere with in ng-app. In above example we have injected both $scope and $rootScope into myController.

3. ng-click

   We have added model and properties to $scope and linked to view. Now lets add some behavior to $scope.Lets add a button to HTML and on click of the button display a message. ng-click directive is used to trigger a click event and we can add a behavior to it.

   
   

4. ng-repeat

   ng-repeat directive is used to repeat over a list of items. Any DOM with ng-repeat will be repeated along with its child DOM. But all expressions with in ng-repeat will be executed in parent context. In below code {{name}} will run in class context. To access individual item we can use {{item.property}}. ng-repeat scope contains some useful variables like $index,$first,$last etc.

Demo 1: Angular calculator

1. Create a sample registration form and display user information on click of "Register".
2. Try out other angular events.(like ng-mouseover)
3. Display a series of students and on click of each student display their details.