Angular modal: add buttons from button list

Trying to add buttons from button list for each modal.

Script:

  var buttonList2 = [{displayName: 'Save', class: 'save'},
                     {displayName: 'Cancel', class: 'cancel'}];

Html:

<button class="btn" type="button" ng-repeat = "item in buttonList" ng-class="{{item.class}}">{{item.displayName}}</button>

Each button has its own class, so I added in list class property. But ng-class doesn't see {{item.class}}

And I can't add functions to these buttons. I tried this:

  $('.cancel').attr('ng-click','cancel()');
  $compile($('.cancel'))($scope);
  $('.save').attr('ng-click','save()');
  $compile($('.save'))($scope); 

http://plnkr.co/edit/NeLthqUuZtw0VyVzd0Ig?p=preview

To dynamically apply css classes use ng-class="item.class" without {{}}.

To add callbacks to your buttons you may add a additional property to your buttons that holds the specific function:

var buttonList2 = [
    {displayName: 'Save', class: 'save', callback: function(){alert('saving');}},
    {displayName: 'Cancel', class: 'cancel', callback: function(){alert('cancelling');}}
];

In your ng-repeat you can then apply them with:

<button type="button" ng-repeat="item in buttonList2" ng-click="item.callback()" ng-class="item.class">{{item.displayName}}</button>