incompatible with angular

[pc-dedelhart]

I have been trying to use the bootstrap combobox with angular but the mere act of databinding the select seems to do "funny things" to the select.

The b-c renders and you get typeahead help but the dropdown doesn't show your list of available options.

[danielfarrell]

I'm a backbone guy myself, I'd have to take a look and see what databinding does. Feel free to dig more and offer suggestions.

[bingomanatee]

I will try to set up a jsFiddle for you.

[jamesdbowman]

Hi all, I had this issue too. Turns out that you just need to understand how to make angular and jQuery play nicely together.

Here's what I did to get things working:

My HTML: (Note: the initial placeholder option here is key, stops the selection being null at first)

<div class="well" ng-controller="DeviceSelectCtrl">
        <h2>Device ID:</h2>
        <select class="combobox" ng-model="selectedDevice" ng-options="d.label for d in devices" combobox>
            <option style="display:none" value="">Select a Device</option>
        </select>
    </div>

My Angular controller:

app.controller('DeviceSelectCtrl', ['$scope', function($scope) {
    $scope.comboboxSetup = false;
    $scope.devices = [{label: 'D1', value: 'D1'},
                      {label: 'D2', value: 'D2'}];
}]);

My Angular directive 'combobox'

app.directive('combobox', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            scope.$watch("selectedDevice", function(){
                if(!scope.comboboxSetup){
                    $(".combobox").combobox();
                    scope.comboboxSetup = true;
                }
            });
        }
    }
});

[thephw]

There a simple change in the library that would make this play nicer with angular?

[davidxia]

@bowmessage Thanks for the code snippets. I'm making an async HTTP request to get the data, and then use ng-repeat to populate the <option>s. Your solution almost worked for me.

To make it work for me:

• add another flag that signaled when the async request was done
• make watch expression for scope.$watch() be a function that returned the flag above
• add setTimeout to delay calling .combobox() until Angular rendered the data returned from the async call into multiple <option> elements

app.controller('DeviceSelectCtrl', ['$scope', '$http', function($scope, $http) {
    $scope.comboboxSetup = false;
    $scope.asyncReqDone = false;
    $http.get('http://example.com')
      .success(function(data) {
        // do stuff
        $scope.asyncReqDone = true;
      });
}]);

app.directive('combobox', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.$watch(
              function() { return scope.asyncReqDone; },
              function() {
                if(!scope.comboboxSetup && scope.asyncReqDone) {
                    window.setTimeout(function() {
                      $(".combobox").combobox();
                      scope.comboboxSetup = true;
                    }, 1000);
                }
            });
        }
    }
});