Customizing dynamically added buttons in popups


I was integrating social share feature in one of my apps and was aiming for something like this for the UI

Basically it is a popup, with options (as buttons) for different ways to share some content.

Here is the code for the popup:

$scope.sharePopup = function(){
    title: 'Share Via',
     buttons: [
      			text: 'Share on Facebook',
      			type: 'button-block icon-left ion-social-facebook button-facebook', 
      			onTap: function(e){ 	
                               'My share message', 
			        null /* img */,
                                null /* url */,
                                function() {

Now you have to tweak around the ionic.js file. But it is simple.

  '<div class="popup">' +
    '<div class="popup-head">' +
      '<h3 class="popup-title" ng-bind-html="title"></h3>' +
      '<h5 class="popup-sub-title" ng-bind-html="subTitle" ng-if="subTitle"></h5>' +
    '</div>' +
    '<div class="popup-body">' +
    '</div>' +
    '<div class="padding">' +
      '<button ng-repeat="button in buttons" ng-click="$buttonTapped(button, $event)" class="button" ng-class="button.type || \'button-default\'" ng-bind-html="button.text"></button>' +
    '</div>' +

Exactly paste this for the POPUP_TPL variable.

I have replaced just class names that was not necessary, i.e

 '<div class="popup-buttons row">' +
      '<button ng-repeat="button in buttons" ng-click="$buttonTapped(button, $event)" class="button col" ng-class="button.type || \'button-default\'" ng-bind-html="button.text"></button>'