<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Example - range input</title>
  <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <script data-require="angular-ui-bootstrap@0.11.0" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
  <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
  <style>
    pre {
      overflow: auto;
      word-wrap: normal;
      white-space: pre;
    }
  </style>
  <script>
    angular.module('myApp', ['ui.bootstrap'])
      .controller('myCtrl', ['$scope',
        function($scope) {

          $scope.rows = [1,2,3,4,5,6,7,8,9];
          
          $scope.items = [
            'The first choice!',
            'And another choice for you.',
            'but wait! A third!'
          ];

          $scope.status = {
            isopen: false
          };

          $scope.toggled = function(open) {
            console.log('Dropdown is now: ', open);
          };

          $scope.toggleDropdown = function($event) {
            $event.preventDefault();
            $event.stopPropagation();
            $scope.status.isopen = !$scope.status.isopen;
          };

        }
      ]);
  </script>
</head>

<body ng-app="myApp">
  <div class="container" ng-controller="myCtrl">
    <h1>angular bootstrap dropdown in a table cell <a href="http://stackoverflow.com/questions/25360727">http://stackoverflow.com/questions/25360727</a></h1>
    <br />
    <br />
    <br />
    <div class="row">
      <div class="col-xs-12">
        <table class="table">
          <thead>
            <tr>
              <th>Id</th>
              <th>Name</th>
              <th>#</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="row in rows">
              <td>{{row}}</td>
              <td>Name</td>
              <td>

                <!-- Split button -->
                <div class="btn-group" dropdown>
                  <button type="button" class="btn btn-danger">Action</button>
                  <button type="button" class="btn btn-danger dropdown-toggle">
                    <span class="caret"></span>
                    <span class="sr-only">Split button!</span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a>
                    </li>
                    <li><a href="#">Another action</a>
                    </li>
                    <li><a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

</body>

</html>