diff --git a/src/dropdownToggle/docs/demo.html b/src/dropdownToggle/docs/demo.html
index 5c12fe9708..eabd690f20 100644
--- a/src/dropdownToggle/docs/demo.html
+++ b/src/dropdownToggle/docs/demo.html
@@ -1,10 +1,50 @@
-<li class="dropdown" ng-controller="DropdownCtrl">
-  <a class="dropdown-toggle">
-    Click me for a dropdown, yo!
-  </a>
-  <ul class="dropdown-menu">
-    <li ng-repeat="choice in items">
-      <a>{{choice}}</a>
-    </li>
-  </ul>
-</li>
+
+<div ng-controller="DropdownCtrl">
+    <!-- Simple dropdown -->
+    <span class="dropdown" on-toggle="toggled(open)">
+      <a class="dropdown-toggle">
+        Click me for a dropdown, yo!
+      </a>
+      <ul class="dropdown-menu">
+        <li ng-repeat="choice in items">
+          <a>{{choice}}</a>
+        </li>
+      </ul>
+    </span>
+
+    <!-- Single button -->
+    <div class="btn-group" dropdown is-open="status.isopen">
+      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
+        Button dropdown <span class="caret"></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>
+
+    <!-- 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" data-toggle="dropdown">
+        <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>
+
+    <hr />
+    <p>
+        <button type="button" class="btn btn-default btn-sm" ng-click="toggleDropdown($event)">Toggle button dropdown</button>
+    </p>
+
+</div>
diff --git a/src/dropdownToggle/docs/demo.js b/src/dropdownToggle/docs/demo.js
index 8ece418d38..e3f2a834ad 100644
--- a/src/dropdownToggle/docs/demo.js
+++ b/src/dropdownToggle/docs/demo.js
@@ -4,4 +4,18 @@ function DropdownCtrl($scope) {
     '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;
+  };
 }
diff --git a/src/dropdownToggle/docs/readme.md b/src/dropdownToggle/docs/readme.md
index 2e42c46be6..e7bf152cf0 100644
--- a/src/dropdownToggle/docs/readme.md
+++ b/src/dropdownToggle/docs/readme.md
@@ -1,2 +1,4 @@
 
-DropdownToggle is a simple directive which will toggle a dropdown link on click.  Simply put it on the `<a>` tag of the toggler-element, and it will find the nearest dropdown menu and toggle it when the `<a dropdown-toggle>` is clicked.
+Dropdown is a simple directive which will toggle a dropdown menu on click or programmatically.
+You can either use `is-open` to toggle or add inside a `<a dropdown-toggle>` element to toggle it when is clicked.
+There is also the `on-toggle(open)` optional expression fired when dropdown changes state.
diff --git a/src/dropdownToggle/dropdownToggle.js b/src/dropdownToggle/dropdownToggle.js
index 5a1510d7f9..3db0578e2b 100644
--- a/src/dropdownToggle/dropdownToggle.js
+++ b/src/dropdownToggle/dropdownToggle.js
@@ -1,52 +1,100 @@
-/*
- * dropdownToggle - Provides dropdown menu functionality in place of bootstrap js
- * @restrict class or attribute
- * @example:
-   <li class="dropdown">
-     <a class="dropdown-toggle">My Dropdown Menu</a>
-     <ul class="dropdown-menu">
-       <li ng-repeat="choice in dropChoices">
-         <a ng-href="{{choice.href}}">{{choice.text}}</a>
-       </li>
-     </ul>
-   </li>
- */
-
-angular.module('ui.bootstrap.dropdownToggle', []).directive('dropdownToggle', ['$document', function ($document) {
-  var openElement = null,
-      closeMenu   = angular.noop;
+angular.module('ui.bootstrap.dropdownToggle', [])
+
+.constant('dropdownConfig', {
+  openClass: 'open'
+})
+
+.service('dropdownService', ['$document', function($document) {
+  var self = this, openScope = null;
+
+  this.open = function( dropdownScope ) {
+    if ( !openScope ) {
+      $document.bind('click', closeDropdown);
+    }
+
+    if ( openScope && openScope !== dropdownScope ) {
+        openScope.isOpen = false;
+    }
+
+    openScope = dropdownScope;
+  };
+
+  this.close = function( dropdownScope ) {
+    if ( openScope === dropdownScope ) {
+      openScope = null;
+      $document.unbind('click', closeDropdown);
+    }
+  };
+
+  var closeDropdown = function() {
+    openScope.$apply(function() {
+      openScope.isOpen = false;
+    });
+  };
+}])
+
+.controller('DropdownController', ['$scope', '$attrs', 'dropdownConfig', 'dropdownService', function($scope, $attrs, dropdownConfig, dropdownService) {
+  var self = this, openClass = dropdownConfig.openClass;
+
+  this.init = function( element ) {
+    self.$element = element;
+    $scope.isOpen = angular.isDefined($attrs.isOpen) ? $scope.$parent.$eval($attrs.isOpen) : false;
+  };
+
+  this.toggle = function( open ) {
+    return $scope.isOpen = arguments.length ? !!open : !$scope.isOpen;
+  };
+
+  $scope.$watch('isOpen', function( value ) {
+    self.$element.toggleClass( openClass, value );
+
+    if ( value ) {
+      dropdownService.open( $scope );
+    } else {
+      dropdownService.close( $scope );
+    }
+
+    $scope.onToggle({ open: !!value });
+  });
+
+  $scope.$on('$locationChangeSuccess', function() {
+    $scope.isOpen = false;
+  });
+}])
+
+.directive('dropdown', function() {
   return {
     restrict: 'CA',
-    link: function(scope, element, attrs) {
-      scope.$on('$locationChangeSuccess', function() { closeMenu(); });
-      element.parent().bind('click', function() { closeMenu(); });
-      element.bind('click', function (event) {
+    controller: 'DropdownController',
+    scope: {
+      isOpen: '=?',
+      onToggle: '&'
+    },
+    link: function(scope, element, attrs, dropdownCtrl) {
+      dropdownCtrl.init( element );
+    }
+  };
+})
 
-        var elementWasOpen = (element === openElement);
+.directive('dropdownToggle', function() {
+  return {
+    restrict: 'CA',
+    require: '?^dropdown',
+    link: function(scope, element, attrs, dropdownCtrl) {
+      if ( !dropdownCtrl ) {
+        return;
+      }
 
+      element.bind('click', function(event) {
         event.preventDefault();
         event.stopPropagation();
 
-        if (!!openElement) {
-          closeMenu();
-        }
-
-        if (!elementWasOpen && !element.hasClass('disabled') && !element.prop('disabled')) {
-          element.parent().addClass('open');
-          openElement = element;
-          closeMenu = function (event) {
-            if (event) {
-              event.preventDefault();
-              event.stopPropagation();
-            }
-            $document.unbind('click', closeMenu);
-            element.parent().removeClass('open');
-            closeMenu = angular.noop;
-            openElement = null;
-          };
-          $document.bind('click', closeMenu);
+        if ( !element.hasClass('disabled') && !element.prop('disabled') ) {
+          scope.$apply(function() {
+            dropdownCtrl.toggle();
+          });
         }
       });
     }
   };
-}]);
+});
diff --git a/src/dropdownToggle/test/dropdownToggle.spec.js b/src/dropdownToggle/test/dropdownToggle.spec.js
index dec86fc01d..791d14fe20 100644
--- a/src/dropdownToggle/test/dropdownToggle.spec.js
+++ b/src/dropdownToggle/test/dropdownToggle.spec.js
@@ -1,74 +1,176 @@
 describe('dropdownToggle', function() {
-  var $compile, $rootScope, $document, $location;
+  var $compile, $rootScope, $document, element;
 
   beforeEach(module('ui.bootstrap.dropdownToggle'));
 
-  beforeEach(inject(function(_$compile_, _$rootScope_, _$document_, _$location_) {
+  beforeEach(inject(function(_$compile_, _$rootScope_, _$document_) {
     $compile = _$compile_;
     $rootScope = _$rootScope_;
     $document = _$document_;
-    $location = _$location_;
-
   }));
 
-  function dropdown() {
-    return $compile('<li class="dropdown"><a dropdown-toggle></a><ul dropdown-toggle><li>Hello</li></ul></li>')($rootScope);
-  }
-
-  it('should toggle on `a` click', function() {
-    var elm = dropdown();
-    expect(elm.hasClass('open')).toBe(false);
-    elm.find('a').click();
-    expect(elm.hasClass('open')).toBe(true);
+  var clickDropdownToggle = function(elm) {
+    elm = elm || element;
     elm.find('a').click();
-    expect(elm.hasClass('open')).toBe(false);
-  });
+  };
 
-  it('should toggle on `ul` click', function() {
-    var elm = dropdown();
-    expect(elm.hasClass('open')).toBe(false);
-    elm.find('ul').click();
-    expect(elm.hasClass('open')).toBe(true);
-    elm.find('ul').click();
-    expect(elm.hasClass('open')).toBe(false);
-  });
+  describe('basic', function() {
+    function dropdown() {
+      return $compile('<li class="dropdown"><a dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
+    }
 
-  it('should close on elm click', function() {
-    var elm = dropdown();
-    elm.find('a').click();
-    elm.click();
-    expect(elm.hasClass('open')).toBe(false);
+    beforeEach(function() {
+      element = dropdown();
+    });
+
+    it('should toggle on `a` click', function() {
+      expect(element.hasClass('open')).toBe(false);
+      clickDropdownToggle();
+      expect(element.hasClass('open')).toBe(true);
+      clickDropdownToggle();
+      expect(element.hasClass('open')).toBe(false);
+    });
+
+    it('should close on document click', function() {
+      clickDropdownToggle();
+      expect(element.hasClass('open')).toBe(true);
+      $document.click();
+      expect(element.hasClass('open')).toBe(false);
+    });
+
+    it('should close on $location change', function() {
+      clickDropdownToggle();
+      expect(element.hasClass('open')).toBe(true);
+      $rootScope.$broadcast('$locationChangeSuccess');
+      $rootScope.$apply();
+      expect(element.hasClass('open')).toBe(false);
+    });
+
+    it('should only allow one dropdown to be open at once', function() {
+      var elm1 = dropdown();
+      var elm2 = dropdown();
+      expect(elm1.hasClass('open')).toBe(false);
+      expect(elm2.hasClass('open')).toBe(false);
+
+      clickDropdownToggle( elm1 );
+      expect(elm1.hasClass('open')).toBe(true);
+      expect(elm2.hasClass('open')).toBe(false);
+
+      clickDropdownToggle( elm2 );
+      expect(elm1.hasClass('open')).toBe(false);
+      expect(elm2.hasClass('open')).toBe(true);
+    });
+
+    it('should not toggle if the element has `disabled` class', function() {
+      var elm = $compile('<li class="dropdown"><a class="disabled" dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
+      clickDropdownToggle( elm );
+      expect(elm.hasClass('open')).toBe(false);
+    });
+
+    it('should not toggle if the element is disabled', function() {
+      var elm = $compile('<li class="dropdown"><button disabled="disabled" dropdown-toggle></button><ul><li>Hello</li></ul></li>')($rootScope);
+      elm.find('button').click();
+      expect(elm.hasClass('open')).toBe(false);
+    });
+
+    // issue 270
+    it('executes other document click events normally', function() {
+      var checkboxEl = $compile('<input type="checkbox" ng-click="clicked = true" />')($rootScope);
+      $rootScope.$digest();
+
+      expect(element.hasClass('open')).toBe(false);
+      expect($rootScope.clicked).toBeFalsy();
+
+      clickDropdownToggle();
+      expect(element.hasClass('open')).toBe(true);
+      expect($rootScope.clicked).toBeFalsy();
+
+      checkboxEl.click();
+      expect($rootScope.clicked).toBeTruthy();
+    });
   });
 
-  it('should close on document click', function() {
-    var elm = dropdown();
-    elm.find('a').click();
-    $document.click();
-    expect(elm.hasClass('open')).toBe(false);
+  describe('without trigger', function() {
+    beforeEach(function() {
+      $rootScope.isopen = true;
+      element = $compile('<li class="dropdown" is-open="isopen"><ul><li>Hello</li></ul></li>')($rootScope);
+      $rootScope.$digest();
+    });
+
+    it('should be open initially', function() {
+      expect(element.hasClass('open')).toBe(true);
+    });
+
+    it('should toggle when `is-open` changes', function() {
+      $rootScope.isopen = false;
+      $rootScope.$digest();
+      expect(element.hasClass('open')).toBe(false);
+    });
   });
 
-  it('should close on $location change', function() {
-    var elm = dropdown();
-    elm.find('a').click();
-    expect(elm.hasClass('open')).toBe(true);
-    $rootScope.$broadcast('$locationChangeSuccess');
-    $rootScope.$apply();
-    expect(elm.hasClass('open')).toBe(false);
+  describe('`is-open`', function() {
+    beforeEach(function() {
+      $rootScope.isopen = true;
+      element = $compile('<li class="dropdown" is-open="isopen"><a dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
+      $rootScope.$digest();
+    });
+
+    it('should be open initially', function() {
+      expect(element.hasClass('open')).toBe(true);
+    });
+
+    it('should change `is-open` binding when toggles', function() {
+      clickDropdownToggle();
+      expect($rootScope.isopen).toBe(false);
+    });
+
+    it('should toggle when `is-open` changes', function() {
+      $rootScope.isopen = false;
+      $rootScope.$digest();
+      expect(element.hasClass('open')).toBe(false);
+    });
   });
 
-  it('should only allow one dropdown to be open at once', function() {
-    var elm1 = dropdown();
-    var elm2 = dropdown();
-    elm1.find('a').click();
-    elm2.find('a').click();
-    expect(elm1.hasClass('open')).toBe(false);
-    expect(elm2.hasClass('open')).toBe(true);
+  describe('`on-toggle`', function() {
+    beforeEach(function() {
+      $rootScope.toggleHandler = jasmine.createSpy('toggleHandler');
+      element = $compile('<li class="dropdown" on-toggle="toggleHandler(open)"><a dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
+      $rootScope.$digest();
+    });
+
+    it('should be called initially', function() {
+      expect($rootScope.toggleHandler).toHaveBeenCalledWith(false);
+    });
+
+    it('should call it correctly when toggles', function() {
+      clickDropdownToggle();
+      expect($rootScope.toggleHandler).toHaveBeenCalledWith(true);
+
+      clickDropdownToggle();
+      expect($rootScope.toggleHandler).toHaveBeenCalledWith(false);
+    });
   });
 
-  it('should not toggle if the element is disabled', function() {
-    var elm = $compile('<li class="dropdown"><a class="disabled" dropdown-toggle></a><ul dropdown-toggle><li>Hello</li></ul></li>')($rootScope);
-    elm.find('a').click();
-    expect(elm.hasClass('open')).toBe(false);
+  describe('`on-toggle` with initially open', function() {
+    beforeEach(function() {
+      $rootScope.toggleHandler = jasmine.createSpy('toggleHandler');
+      $rootScope.isopen = true;
+      element = $compile('<li class="dropdown" on-toggle="toggleHandler(open)" is-open="isopen"><a dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
+      $rootScope.$digest();
+    });
+
+    it('should be called initially with true', function() {
+      expect($rootScope.toggleHandler).toHaveBeenCalledWith(true);
+    });
+
+    it('should call it correctly when toggles', function() {
+      $rootScope.isopen = false;
+      $rootScope.$digest();
+      expect($rootScope.toggleHandler).toHaveBeenCalledWith(false);
+
+      $rootScope.isopen = true;
+      $rootScope.$digest();
+      expect($rootScope.toggleHandler).toHaveBeenCalledWith(true);
+    });
   });
 });
-