Bootstrap-select,angularjs dropdown not working

Question

I have this issue and hope to get some advice on how to fix it.

I've moved part of my html page into a partial view and loading it through ng-view the problem now is that the dropdown-select doens't work anymore,I managed to get the style back but when I click on it, it doesn't open. When it wasn't in the partial view, I didn't even need to make a javascript call which seems to be required now.

Here's my code

index.html
 <link href="resources/css/bootstrap.min.css" rel="stylesheet">
    <link href="resources/css/bootstrap-select.css" rel="stylesheet">
    <!-- Bootstrap Core CSS -->

    <script src="resources/js/jquery-2.1.1.min.js"></script>
    <script src="resources/js/jquery-1.11.0.js"></script>

    <script src="resources/js/bootstrap-select.js"></script>

    <script src="resources/library/angular.js"></script>
    <script src="resources/library/angular-route.js"></script>
    <script src="resources/js/MainController.js"></script>
    <script src="resources/js/main-app.js"></script>

    partialview.html
    -------------------
     <select class="selectpicker" multiple ng-model="selE">
                    <option ng-repeat="e in ee">{{e}}</option>
                </select>

    <script>
    $(document).ready(function () {

        $('select').selectpicker({
            style: 'btn-default',
            size: false
        });

    });

</script>   

Thank you in advance.

Answer 1

Mixing Angular + jQuery is not a good practice. If you want to use any jQuery plugin, you can wrap it into a custom angular directive (official docs).

See a working example of selectpicker directive in this jsFiddle.

html :

<select class="selectpicker"
        multiple
        title='Choose one of the following...'>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

js :

angular.module('demo')
  .directive('selectpicker', function () {
    return {
      restrict: 'C',
      link: function (scope, element) {
        $(element).selectpicker({
          style: 'btn-default',
          size: false
        });
      }
    };
  });

Link to controller

Using require: 'ngModel' in your directive will give you ngModelController as 4th parameter to link function (see doc here).

So you can easyly bind your controller values with directive scope.

See other jsFiddle here.

Directive :

angular.module('demo')
  .directive('selectpicker', function () {
    return {
      restrict: 'C',
      require: 'ngModel',
      link: function (scope, element, attrs, ngModel) {
        var $el = $(element);
        $el.selectpicker({
          style: 'btn-default',
          size: false
        });
        $el.on('change', function (ee, aa) {
          ngModel.$setViewValue($el.val());
          scope.$apply();
        });
      }
    };
  });

Controller :

angular.module('demo')
  .controller('MainCtrl', function ($scope) {
    $scope.selected = [];
  });

HTML :

You have selected : {{ selected | json }}

<select ng-model="selected"
        class="selectpicker"
        multiple
        title='Choose one of the following...'>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Passing options in parameter

See 3rd jsFiddle.

To pass options dynamically, simply update your directive :

angular.module('demo')
  .directive('selectpicker', function ($timeout) {
    return {
      restrict: 'C',
      require: 'ngModel',
      replace: true,
        template: '<select multiple><option ng-repeat="opt in options">{{ opt }}</option></select>',
      scope: {
        options: '='
      },
      link: function (scope, element, attrs, ngModel) {
        var $el = $(element);
        $timeout(function () {
          $el.selectpicker({
            style: 'btn-default',
            size: false
          });
        });
        $el.on('change', function (ee, aa) {
          ngModel.$setViewValue($el.val());
          scope.$apply();
        });
      }
    };
  });

Then in your html :

<div ng-model="selected"
        class="selectpicker"
        options="issues"
        title='Choose one of the following...'>
</div>

Answer 2

I got another solution to the issue related.

What I did was first load my data from back-end using angularjs and inside the .success after my validation I wrote the following code:

angular.element(document).ready(function () { 
  $('select').selectpicker("destroy"); 
  $('select').selectpicker("render"); 
});

I tried to do it without angular.element(document).ready(function (){}) but nothing happened. I suppose the plugin's methods only works inside that function.