Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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?

share|improve this question
add comment

Know someone who can answer? Share a link to this question via email, Google+, Twitter, or Facebook.

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.