Synchronize a selectbox with a dropdown button

Question

I use selectbox (invisible), which is filled dynamically and font changes. The user selects the font with the bootstrap UI dropdown button. We can I keep both in sync selection?

I use the dropdown-button, because I can then format the entries in the relevant font and has not been able to fill the bootstrap UI dropdown button dynamically. Thanks for your tips.

AngularJS

 $scope.fonts = [{
    value: 'Arial',
    label: 'Arial'
  }, {
    value: 'Tahoma',
    label: 'Tahoma'
  }, {
    value: 'Comic Sans MS',
    label: 'Comic Sans MS'  
  }]; 
  $scope.font = $scope.fonts[0]; // Arial hidden select

HTML

My Select:

<select style="display: none" ng-model="font" ng-options="font as font.label for font in fonts" id="font-family-select" >            </select>

My Dropdown Button (Bootstrap UI):

                    <button type="button" data-id="font-family-select" class="btn btn-lg btn-default dropdown-toggle subheader-button" data-toggle="dropdown"  ng-model="font" ng-disabled="disabled" ng-hide="printMode">
                        {{ 'inv.theme.font' | translate }}<span class="caret"></span>
                    </button>


<ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li ng-click="OnItemClick('Arial')">
                                <a href="#"><span style="font-family: Arial">Arial</span></a>
                            </li>
                            <li>
                                <a href="#"><span style="font-family: Tahoma">Tahoma</span></a>
                            </li>
                            <li>
                                <a href="#"><span style="font-family: Comic Sans MS">Comic Sans MS</span></a>
                            </li>
                        </ul>

Answer 1

You have to update "font" model on menu item click.

I put up a simple fidle with a bit modified markup from your question, but it should be clear what's going on http://jsfiddle.net/793f07qL/2/.

Note: You have to pass entire object to scope model, as "ng-options" directive uses it to bind data:

ng-click="OnItemClick(font)"

$scope.OnItemClick = function (font) {
    $scope.font = font;
};