title: Angular directive scope work differently with replace value
body: <p>I have a directive with source code shown below:</p>
  
  <pre><code>var app = angular.module("myApp", ["mytemplate.html"])
  var thai =  angular.module("mytemplate.html", []).run(['$templateCache',
    function ($templateCache) {
      $templateCache.put('mytemplate.html', '&lt;ul ng-if="true"&gt; &lt;li&gt; &lt;a ng-click="next()" href="javascript:void(0)"&gt;&amp;raquo;&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt;');
    }
  ]);
  
  thai.directive('myTop',function() {
  return {
      restrict: 'A',
      replace: false,
      scope: {
  
      },
      templateUrl: 'mytemplate.html',
      link: function (scope) {
          scope.next = function () {
              alert('Hello!');
          };
      }
  }
  });
  </code></pre>
  
  <p>Here is the <a href="https://jsfiddle.net/thai_nguyen/z3j37aqb/" rel="nofollow">JSFiddle</a>.</p>
  
  <p>When I click on the ">>" button, it works well (alert "Hello").  However if I change the <code>replace</code> value in directive from <code>false</code> to <code>true</code> (and click update code in fiddle), the alert no longer works.</p>
  
  <p>I thought that the scope is detached, but I don't know why? Would you please teach me about the reason here? Thanks a lot!</p>