title: Use of link and template properties in directives
body: <pre><code>Wants to use the link function of the directive. Such that it should display a name and on click should change it to the new given name. but there is some error in my template property. w
  Where do i get wrong?
  
  JS code-
  var app=angular.module("app",[]);
  
  app.controller("myController",function($scope){
  
  });
  
  app.directive("myDirective",function(){
      return{
          restrict:"EA",
  
          link: function($scope,element,attr){
           $scope.name="Hello World";
           $scope.changeName=function(newName){
              $scope.name=newName;
           }
          },
          template: '&lt;span ng-click="changeName('Hi!')"&gt;current name:{{name}}&lt;/span&gt;'
  
      };
  });
  
  HTML code-
  &lt;hmtl&gt;
  &lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.js"&gt;&lt;/script&gt;
  &lt;script src="example4.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-app="app"&gt;
      &lt;div ng-controller="myController"&gt;
          &lt;div my-directive &gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/hmtl&gt;
  </code></pre>
  
  <p>First I restricted the directive to "EA".
  Then provided a name to the Scope and a "changeName" function to the scope.
  Then provided a template to change the initialized name to newName on click.</p>