Angularjs ng-include and ng-click glitch

I use the directive to replace the contents of the blocks, which is described here .

In one div is put the attribute block-insertion with the name of the loaded element. The block-replacement attribute with the same name is placed in the friend element itself. And after the content is replaced. The block template itself is loaded via ng-include .

In the template being loaded, the parent's scope is and methods are executed. But for some reason ng-click doesn't work.

Here is a simple example.

I can not understand the reason. Maybe someone will help sort out?

All script code:

var test = angular.module('test', ['sheikcontrolls']); var sheikContolls = angular.module("sheikcontrolls",[]); sheikContolls.controller('BaseController', function ($scope) { $scope.name="Alex"; $scope.getName = function(){ return $scope.name; }; $scope.alertName = function(){ alert($scope.name); }; }); //SideBar here var blocks = {}; test.directive('customOnChange', function() { return { restrict: 'A', link: function (scope, element, attrs) { var onChangeFunc = scope.$eval(attrs.customOnChange); element.bind('change', onChangeFunc); } }; }); test.directive( 'blockInsertion', function () { return { restrict: 'A', link: function (scope, iElement, iAttrs) { var key = iAttrs.blockInsertion; blocks[key] = iElement; // Assume that block-insertion directives won't get // removed after they're inserted. A more robust // implementation would clean these up on $destroy. } }; } ); test.directive( 'blockReplacement', function () { return { restrict: 'A', link: function (scope, iElement, iAttrs) { var key = iAttrs.blockReplacement; // Prepare to move our element to its corresponding // block insertion point. iElement.remove(); if (! blocks[key]) { // No matching block insertion, so just hide. return; } blocks[key].replaceWith(iElement); scope.$on( '$destroy', function () { // Restore the insertion element. iElement.replaceWith(blocks[key]); } ); } } } );