title: Angular js directive using controller as syntax ng-click not working
body: <p>I am having trouble getting a click event in a directive with an isolated scope to work using "controller as" syntax in Angular 1.3 the code for the directive is as follows:</p>
  
  <pre><code>myDirectives.directive('gsphotosquare', dirfxn);
  
  function dirfxn() {
      var directive = {
          replace: false,
          scope: {
              photoInfo: '=',
              photoBatchNum: '=',
              thumbnailwidth: '='
          },
          restrict: 'EA',
          controller: Ctrller,
          controllerAs: 'ctrl',
          template: '&lt;div ng-click="ctrl.squareClicked()"&gt;test&lt;/div&gt;',
          //templateUrl: 'views/directives/gsphotosquare.html',
          bindToController: true, // because the scope is isolated
          link: linkFunc //adding this didn't help
      };
      return directive;
  }
  
  function Ctrller() {
      var vm = this;
  
      vm.squareClicked = function () {
          alert('inside clickhandler for gsphotosquare directive');
      };
  }
  
  function linkFunc(scope, el, attr, ctrl) {
  
      el.bind('click', function () {
          alert('inside clickhandler for gsphotosquare directive');
      });
  }
  </code></pre>
  
  <p>And here is how the directive is used in the DOM:</p>
  
  <pre><code> &lt;span class="input-label"&gt;General Site Photos&lt;/span&gt;
      &lt;div class=" item row"&gt;
      &lt;gsphotosquare photo-info="mt.photos.v1f1[0]" photo-batch-num="mt.photoBatchNum" &gt;&lt;/gsphotosquare&gt;
      &lt;gsphotosquare photo-info="mt.photos.v1f1[1]" photo-batch-num="mt.photoBatchNum" &gt;&lt;/gsphotosquare&gt;
      &lt;gsphotosquare photo-info="mt.photos.v1f1[2]" photo-batch-num="mt.photoBatchNum" &gt;&lt;/gsphotosquare&gt;
     &lt;gsphotosquare photo-info="mt.photos.v1f1[3]" photo-batch-num="mt.photoBatchNum" &gt;&lt;/gsphotosquare&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any ideas why clicking on the rendered directive doesn't show the alert?</p>