AngularJS and Bootstrap's split button dropdown

Look at this demo : http://jsfiddle.net/guillaumebiton/8muRC/

Only the power of Angular:

<div class="btn-group" ng-class='{open: open}'>
    <button class="btn">Action</button>
    <button class="btn dropdown-toggle" data-toggle="dropdown" ng-click='open=!open'><span class="caret"></span></button>
    <ul class="dropdown-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>

It only use one variable 'open' which is true or false.

As part of the angular-ui we are working on creating bootstrap's widgets in pure AngularJS (no dependencies on 3rd party JS libs, with only dependency being bootstrap's CSS).

The repository is located here: https://github.com/angular-ui/bootstrap

This is very much work in progress but there is the dropdown-toggle directive already: https://github.com/angular-ui/bootstrap/blob/master/src/dropdownToggle/dropdownToggle.js

You could use it like this:

<div ng-controller="MyCtrl">
  <div class="btn-group">
      <a class="btn dropdown-toggle">
        Actions
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
          <li><a>Action 1</a></li>
          <li><a>Action 2</a></li>
      </ul>
  </div>
</div>

Please note that this directive operates on the class level so it is enough to add the dropdown-toggle class to have it operational!

Once again, this is work in progress (the whole effort started something like 2-3 weeks ago) so bug reports / pull requests are very welcomed!

You can try using this directive which converts angularjs select box into the bootstrap's dropdown: http://jsfiddle.net/M32pj/28/ `Sample:

<select ng-model="example1" bs-selectbox>
 <option value="1">One</option>
 <option value="2">Two</option>
</select>

`