Shows how to intercept a checkbox click to display a dialog using UI Bootstrap Modal, and wait for the user to confirm or cancel before deciding which action to take.

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap-css@3.1.*" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  <script data-require="angular.js@1.3.10" data-semver="1.3.10" src="https://code.angularjs.org/1.3.10/angular.js"></script>
  <script data-require="ui-bootstrap@*" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="modal-example">

  <h1>Hello Plunker!</h1>
  <div class="container">
    <table class="table">
      <thead>
        <tr>
          <th>Subscription Name</th>
          <th>Auto Renew</th>
        </tr>
      </thead>
      <tbody ng-controller="SubscriptionController as subCtrl">
        <tr ng-repeat="subscription in subCtrl.subscriptions">
          <td>
            {{ subscription.name }}
          </td>
          <td>
            <input type="checkbox" name="onoffswitch" class="autorenew onoffswitch-checkbox" id="switch-{{ subscription.id }}" value="1" ng-checked="subscription.auto_renew" ng-click="subCtrl.toggleAutoRenew($event, subscription)">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

// Code goes here

(function() {
  'use strict';

  function SubscriptionController($modal, $log) {
    this.$modal = $modal;
    this.$log = $log;
    this.subscriptions = [{
      id: 1,
      name: 'Foo'
    }, {
      id: 2,
      name: 'Bar'
    }, {
      id: 3,
      name: 'Loopy'
    }, {
      id: 4,
      name: 'Zaney'
    }];
  }

  SubscriptionController.prototype = {
    toggleAutoRenew: function($event, subscription) {
      var _this = this;

      $event.preventDefault();
      $event.stopPropagation();

      _this.confirmAutoRenew(subscription)
        .then(function() {
          subscription.auto_renew = !subscription.auto_renew;
        });
    },
    confirmAutoRenew: function(subscription) {
      var _this = this;

      var message = 'Are you sure you want to ' +
        (subscription.auto_renew ? 'Cancel' : 'Renew') +
        ' your subscription to "' + subscription.name + '"';

      return _this.$modal.open({
        templateUrl: 'confirm-modal.html',
        controller: 'ConfirmModalController as ctrl',
        resolve: {
          settings: function() {
            return {
              title: 'Confirm Subscription',
              message: message
            };
          }
        }
      }).result;
    }
  };

  function ConfirmModalController(settings, $log) {
    angular.extend(this, settings);
  }

  angular.module('modal-example', ['ui.bootstrap'])
    .controller('SubscriptionController', SubscriptionController)
    .controller('ConfirmModalController', ConfirmModalController);

}());

/* Styles go here */

<div class="modal-header">
  <h3 class="modal-title">{{::ctrl.title}}</h3>
</div>
<div class="modal-body">
  {{::ctrl.message}}
</div>
<div class="modal-footer">
  <button class="btn btn-primary" ng-click="$close()">OK</button>
  <button class="btn btn-warning" ng-click="$dismiss()">Cancel</button>
</div>