title: Bind Angular JS ui-bootstrap dropdown toggle to ng-model
body: <p>I am trying to use the angularjs bootstrap dropdown toggle on a form, and i need to be able to  bind the selected item back to a model for a new "organisation" in my application.</p>
  
  <p>Here's my js module i'm using to create all my controls:</p>
  
  <pre><code>var Controls = angular.module('PulseControls', ['ui.bootstrap']);
  
  var booleanButtonCtrl = function($scope) {
      $scope.radioModel = true;  
  };
  
  var currencyDropDownButtonCtrl = function($scope) {
      $scope.currencies = [{
          id: 1,
          name: 'US Dollar'
      }, {
      id: 2,
      name: 'Euro'
  }, {
      id: 3,
      name: 'Australian Dollar'
  }];    
  };
  </code></pre>
  
  <p>Here's my starting code for my CreateNewOrganisation controller</p>
  
  <pre><code>function CreateOrganisationController($scope, $http, $window) {
      $scope.newOrganisation = {
          isActive: true,
  };
  </code></pre>
  
  <p>and finally, here's my html code snippet, which includes a  for "Status" and a  for Currency, both of which use ui-bootstrap...</p>
  
  <pre><code>        &lt;div class="form-group"&gt;
              &lt;label class="control-label"&gt;Status&lt;/label&gt;&lt;br /&gt;
              &lt;div ng-controller="booleanButtonCtrl"&gt;
                  &lt;div class="btn-group"&gt;
                      &lt;button type="button"
                              class="btn btn-primary"
                              data-ng-model="newOrganisation.isActive"
                              btn-radio="true"&gt;
                          Active
                      &lt;/button&gt;
                      &lt;button type="button"
                              class="btn btn-primary"
                              data-ng-model="newOrganisation.isActive"
                              btn-radio="false"&gt;
                          Dormant
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;label class="control-label"&gt;Currency&lt;/label&gt;
              &lt;div class="dropdown" data-ng-controller="dropDownButtonCtrl"&gt;
                  &lt;div class="btn-group"&gt;
                      &lt;a class="btn btn-primary dropdown-toggle"&gt;Please select&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li ng-repeat="currency in currencies"&gt;
                              &lt;a ng-model = "newOrganisation.currency"&gt;{{currency.name}}&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>The approach taken in the Status  works nicely, but I can't get the dropdown control for Currency to work. Any suggestions?</p>