var app = angular.module("test",[]); app.controller("Ctrl1",function($scope){ $scope.name = "Harry"; $scope.reverseName = function(){ $scope.name = $scope.name.split('').reverse().join(''); }; }); app.directive("myDirective", function(){ return { restrict: "EA", scope: {}, template: "<div>Your name is : {{name}}</div>"+ "Change your name : <input type='text' ng-model='name'/>" }; });
<div ng-app="test"> <div ng-controller="Ctrl1"> <h2 ng-click="reverseName()">Hey {{name}}, Click me to reverse your name</h2> <div my-directive class='directive'></div> </div> </div>
h2 { cursor: pointer; } .directive { border: 5px solid #F5BF6E;; padding: 10px; }