Angular trigger js 'onclick' event

Question

I'm trying to trigger an 'onclick' event inside of an angular controller.

<div id="galerie">
    <h2>{{main.Page.title()}}</h2>
    <hr>

    <div class="row">
        <div class="col-sm-4 col-xs-6" ng-repeat="i in page.getLans() track by $index">
            <a ng-click="page.selectGalerie($index+1)" href>Playground Vol.{{$index+1}}</a>
        </div>
    </div>

    <div id="links">
        <a id="galerieLink_{{$index}}" href="img/galerie/pg{{page.galerie.volume}}/{{file}}" ng-repeat="file in page.galerie.files">{{$index}} </a>
    </div>

    <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
        <div class="slides"></div>
        <h3 class="title"></h3>
        <a class="prev">‹</a>
        <a class="next">›</a>
        <a class="close">×</a>
        <a class="play-pause"></a>
        <ol class="indicator"></ol>
    </div>
</div>

<script>
    document.getElementById('links').onclick = function (event) {
        event = event || window.event;
        var target = event.target || event.srcElement;
        var link = target.src ? target.parentNode : target;
        var options = {index: link, event: event};
        console.log(options);
        var links = this.getElementsByTagName('a');
        blueimp.Gallery(links, options);
    };
</script>

I was trying it this way inside my controller:

angular.element('#galerieLink_0').trigger('click');

But it doesn't work.

Answer 1

Angular is not jquery. functionality belongs in the controller.

var app = angular.module("app", []); 
app.controller("foo",["$scope",function($scope){
  
  $scope.clickCount = 0; 
  $scope.counter = function() { $scope.clickCount++; }
  
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="foo">
  <div ng-bind="clickCount"></div>
  <button ng-click="counter()" >+1</button>
</div>