How to add ng-click handler dynamically How to add ng-click handler dynamically angularjs angularjs

How to add ng-click handler dynamically


Issue is with this line of code:

$compile(generated)($scope);

Instead it should be:

$compile(generated.contents())($scope);


You can assign the function to a scope variable and depending on your business logic assign appropriate functions to your ng-click. In the below example $scope.addGeoFence() is added to the ng-click of "Add GeoFence" list-item

$scope.layout = [      {name: 'Home', icon: 'home'},      {name: 'Add Geofence',        icon: 'add_location',        click: $scope.addGeoFence}];$scope.addGeoFence = function() {    console.log("calling addGeoFence()");}<md-list>    <md-list-item ng-repeat="snav in layout">        <md-button class="md-raised" ng-click="(snav.click)()" flex>            <md-icon md-font-library="material-icons">{{snav.icon}}            </md-icon>            <span>{{snav.name}}</span>        </md-button>    </md-list-item></md-list>