Bind Angular JS ui-bootstrap dropdown toggle to ng-model

Question

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.

Here's my js module i'm using to create all my controls:

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'
}];    
};

Here's my starting code for my CreateNewOrganisation controller

function CreateOrganisationController($scope, $http, $window) {
    $scope.newOrganisation = {
        isActive: true,
};

and finally, here's my html code snippet, which includes a for "Status" and a for Currency, both of which use ui-bootstrap...

        <div class="form-group">
            <label class="control-label">Status</label><br />
            <div ng-controller="booleanButtonCtrl">
                <div class="btn-group">
                    <button type="button"
                            class="btn btn-primary"
                            data-ng-model="newOrganisation.isActive"
                            btn-radio="true">
                        Active
                    </button>
                    <button type="button"
                            class="btn btn-primary"
                            data-ng-model="newOrganisation.isActive"
                            btn-radio="false">
                        Dormant
                    </button>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label">Currency</label>
            <div class="dropdown" data-ng-controller="dropDownButtonCtrl">
                <div class="btn-group">
                    <a class="btn btn-primary dropdown-toggle">Please select<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li ng-repeat="currency in currencies">
                            <a ng-model = "newOrganisation.currency">{{currency.name}}</a>
                        </li>
                    </ul>
                </div>

            </div>
        </div>

The approach taken in the Status works nicely, but I can't get the dropdown control for Currency to work. Any suggestions?

Answer 1

<div class="dropdown" data-ng-controller="dropDownButtonCtrl">

I suspect the value for data-ng-controller here should be

currencyDropDownButtonCtrl

Answer 2

This is a late response but nevertheless here is the plunker to accomplish this. Please note that the model in the controller that contains all the countries data does not have an ID for all the countries. Rather I only added id values for the first 9 countries in the model (NOT AS SEEN IN THE DROPDOWN which is sorted). So you could pick China, India and Brazil to test.

    var testController = ['$scope', '$http',
  function($scope, $http) {

    $scope.status = 'loading...';
    $scope.country = "Select Country";
    $scope.data = {
        "locations": {}
    };
    $scope.selectedCountryId = "1";
    $scope.onCountrySelect = function(selectedCountry){
      //$scope.country = selectedCountry.country;
      $scope.selectedCountryId = selectedCountry.id;
    }
  $scope.selectInitial = function(id){
      for (var i = 0; i < $scope.data.locations.countries.length; i++) {
        if ($scope.data.locations.countries[i].id == id)
        {
          return $scope.data.locations.countries[i].country;
        }
      }
      //$scope.country = selectedCountry.country;
    }
    //load JSON data
    $http.get('countries.json')
      .then(function(res) {
        $scope.data.locations.countries = res.data;
        $scope.status = "loaded "+$scope.data.locations.countries.length+" countries.";
        $scope.$apply();
      });


  }
];