Can't get angular-bootstrap-select to work?

Question

Because I want a sexy looking <select> in my angular website I'm trying to get Angular-Bootstrap-Select working. The demo seems fairly simple, but I just can't get it to work in my own code.

I import all dependencies without problems (jQuery, Bootstrap-select, Angular, etc.) and Bootstrap-select works perfectly fine outside of Angular.

I installed angular-bootstrap-select using bower, import it successfully in the head and inject it in my angular app:

var propertyApp = angular.module('propertyApp', [
    'propertyControllers',
    'ui.router',
    'angular-bootstrap-select'
]);

propertyApp.config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider){
        $stateProvider
            .state('new', {
                url: '/new',
                templateUrl: '/static/angular/property/partials/newProperty.html',
                controller: 'NewPropertyCtrl'
            });

        $urlRouterProvider.otherwise('/new')
    }
]);

My controller is completely empty:

var propertyControllers = angular.module('propertyControllers', []);
propertyControllers.controller('NewPropertyCtrl', [function(){
}]);

and my template looks like this:

<div class="row">
    <div class="col-sm-12">
        Before selectpicker
        <select class="selectpicker">
            <option>Mustard</option>
            <option>Ketchup</option>
            <option>Relish</option>
        </select>
        After selectpicker
    </div>
</div>

but the only thing I see in the browser is: Before selectpicker After selectpicker.

I've got a working codepen here, but I just can't figure out what is so different between that example, and my own code.

Does anybody see or maybe know what I'm doing wrong here? All tips are welcome!

[EDIT]

I can get it to work perfectly well in a codepen, but in my own code it still won't to work. My own test is here: http://185.53.129.139:5000/property-admin#/new This really drives me crazy, so anybody helping me out with this would really make my day!

Answer 1

Here is a small plunker I've made with bootstrap-select and angular. http://plnkr.co/edit/webnjq6kzLDnnkI9ZO6W

  angular.module('angular-bootstrap-select', [])
  .directive('selectpicker', ['$parse', function ($parse) {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        element.selectpicker($parse(attrs.selectpicker)());
        element.selectpicker('refresh');

        scope.$watch(attrs.ngModel, function (newVal, oldVal) {
          scope.$parent[attrs.ngModel] = newVal;
          scope.$evalAsync(function () {
            if (!attrs.ngOptions || /track by/.test(attrs.ngOptions)) element.val(newVal);
            element.selectpicker('refresh');
          });
        });

    scope.$on('$destroy', function () {
      scope.$evalAsync(function () {
        element.selectpicker('destroy');
      });
    });
  }
};
}]);

As you'll see, bootstrap-select is wrapped in a directive. I think that's the easies way.

Regards, Eric