AngularJS Custom directives

AngularJS - Custom directives                                                  

List of Angular js Directives with examples :
a) ng-app - It will tell the AngularJS that this is the root element of the application. ng-app will be set in the index.html page which is the default HTML page of the application where the <html> </html> tags starts or in the <body></body> element, Only one ng-app directive can be set to a element if more then one is detected when the library load then the first occurrence will be set as root element. When the Angular Js library loads it will check the ng-app directive and set the $rootScope to the ng-app element.
 Example :   
   1) ng-app in HTML tag    
   <html ng-app="store">  
   
   2) ng-app in the body tag
   <body ng-app="store">

  Code Explanation : "store" is the name of the app. you need to use the app name in your entire application.
 For ex: 
  1) store.controller('LoginController', function() {
});

  2) store.filter('HTMLparser', function() {
});

b) ng-init - It initializes the variable in the app. ng-init will not create a new scope, it adds an expression in the current scope. To create  seperate scope use ng-controller

   For ex:
   Controller :
store.controller('ListController', function($scope) {
});

   To add expression in the same scope using ng-init :

   <div ng-init="model = { score: '204'}">
      <a href="" ng-click="model.score = '204'">204</a> | <a href=""ng-click="model.score=  '105'">105</a>
      <div>Display {{ model.score }}</div>
      <hr />
      </div>

    To create seperate scope using ng-init :

     <div ng-controller="ListController" ng-init="model = { score: '204'}">
      <a href="" ng-click="model.score = '204'">204</a> |  <a href="" ng-click="model.score = '105'">105</a>
      <div>Display {{ model.score }}</div>
      <hr />
    </div>

 c) ng-bind - The ng-bind directive will notify AngularJS to update the content of an HTML element with the value provided in the application scope variable.
   Different types of bindings :
1) One way binding using ng-bind
Example : 
         Controller :
          var app = angular.module('store', []);
app.controller('myStore', function($scope) {
    $scope.stname = "Van husen";
    $scope.staddress = "Germany";
  });

         view : <p ng-bind="stname"></p>
2) Two way binding using ng-bind
Example :
        View :
        <div ng-app="store" ng-controller="myStore">
        Name: <input ng-model="stname">
        <h1>{{stname}}</h1>
        </div>
        <a ng-click="getvalue"></a>

       Controller :
  var app = angular.module('myApp', []);
 app.controller('myStore', function($scope) {
        $scope.stname = "Van husen";
        $scope.staddress = "Germany";
           $scope.getvalue = fucntion(){
              console.log($scope);
              }
 });