Untitled

<!DOCTYPE html>
<html ng-app="App">

  <head>
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="Main">
      <connected ng-model="item"></connected>
    </div>
  </body>

</html>

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

$app.controller('Main', [function(){
  var vm = this;
  vm.item = "OK";
  vm.messenger = function(){
    alert(vm.item);
  }
}]);

$app.directive('connected', ['$filter', function($filter){
  return {
    scope:{
      ngModel: '='
    },
    template: '<h1>{{ctrl.item}} - <a href="javascript:void(0);" ng-click="teste(\'ITEM\')">OK</a></h1>',
    controller: 'Main',
    controllerAs: 'ctrl',
    link: function(scope, element, attrs){
      scope.teste = function(v){
        scope.ctrl.item = scope.ctrl.item +" - "+ v;
        scope.ctrl.messenger();
      }
    }
  }
}]);

/* Styles go here */