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

app.controller('MainCtrl', function($scope) {
  
});

app.directive('myTest', ['$compile', function($compile) {
  return {
    link: function($scope, $element, $attrs) {
      $element.removeAttr('my-test');
      $compile($element)($scope);
      
      $scope.$watch('count', function(value) {
        console.log('count changed: ', value);
      });
      
      $scope.$on('$destroy', function() {
        console.log('my-test destroyed');
      });
    }
  };
}]);
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <!-- By setting the version to snapshot (available for all modules), you can test with the latest master version -->
    <!--<script src="https://code.angularjs.org/snapshot/angular.js"></script>-->
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl" ng-init="count = 0">
    <p ng-bind="count"></p>
    
    <button ng-click="count = count + 1">+</button>
    <button ng-click="count = count - 1">-</button>
    <button ng-click="count = 0">0</button>
    
    <p ng-if="count > 0" my-test ng-bind="'my-test shown, count: ' + count"></p>
  </body>
</html>
/* Put your css in here */