AngularJS | Difference between directives controller and link

AngularJS | Difference between directives controller and link http://www.shanidkv.com/

by Shanid

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="wrapper">
  <div class="panel panel-default" ng-app="myApp">
    <div class="panel-heading">Difference between directives controller and link</div>
    <div class="panel-body">
      <demo-directive></demo-directive>
    </div>
  </div>
</div>

CSS

.wrapper{
  padding: 20px;
}

JavaScript

var app = angular.module('myApp', []);

app.directive('demoDirective',function(){
	return{
  	scope:{
    	name: '@',
      update: '@'
    },
  	template: '<h3>{{name}} | {{update}}</h3>',
    controller: ['$scope', function ($scope) {
      $scope.name = 'Doc',
    	$scope.update = "Got from Controller"
    }],
    link: function(scope, el, attr){
    	scope.name = 'Document',
    	scope.update = "Got from Link"
    }
  }
});